CSSの :not疑似クラスの使い方

はじめに

個人開発をしていて、今まで使っていなかったCSSの疑似クラス:notを使う機会があったので、そのメモ書きです。

:not疑似クラスは、かっこ内のセレクタリストと一致しない場合に、対象となっているCSSを適用する。という動作をします。例えば以下の例。

p:not(.change-color) {
  color: red;
}

<p>タグで.change-colorクラスを持っていない要素は、文字色を赤に設定する。という具合になります。
この例では、クラスを指定していますが、クラス以外にもタグや、属性を指定できます。

/* 属性 dir="rtl" が設定されているdiv以外の背景色を変更する。 */
div:not([dir="rtl"]) {
  background-color: red;
}

:not疑似クラスに限ったことではありませんが、疑似クラスの使い方には注意が必要です。
特にブランクの付け方によって意味が変わるので注意しましょう。

body :not(p) {
  color: gray;
}

上の例は、bodyの指定の後にブランクが存在しています。この場合は、適用されるのは、『<body>タグの子要素の中で<p>タグ以外の文字色をグレーに設定する。』となります。
仮に,,,

body:not(p) {
  color: gray;
}

ブランクを除いて、bodyと:notを連結してしまうと、『<body>タグの属性<p>以外』というわけの分からない内容なってしまい、スタイルが適用されません。

:not疑似クラスは重ねて使用することができるため、二重否定の文法を記載することができます。
ただ、あくまで『出来る』というだけで、個人的には可読性が低いので積極的には使わない方が良いかなと思っています。

/* 二重否定なので、属性 dir="rtl" が設定されているdivの背景色を変更する。 */
div:not(:not([dir="rtl"])) {
  background-color: red;
}