CSSの:not()と複数条件のセレクタ

このレッスンでは、:not()や複数条件を組み合わせたCSSセレクタの使い方を学び、細かい条件分岐を表現できるようになることを目標にします。「CSS :not 使い方」で調べている方向けの内容です。

:not(条件)を使うと「〜以外」の要素を選べます。.a.bのようにクラスを続けて書くと「aとbの両方を持つ要素」を選べます(AND条件のような使い方です)。細かい条件分岐を、余分なクラスを増やさずに表現できるのが利点です。

サンプルコードでは、li:not(.important)で「importantクラスがついていない項目」に取り消し線を、li.importantで「importantクラスがついている項目」に赤色と太字を指定しています。同じ<li>タグでも、クラスの有無によって全く違う見た目になる様子を確認できます。

初心者がよくつまずくのが、:not()の中に書けるセレクタの複雑さに限界がある点です。単純なクラスやタグの否定はできますが、複雑な条件を:not()だけで表現しようとすると読みにくくなることもあり、その場合は別のクラスを追加する方が分かりやすい場合もあります。

たとえば「重要マークがついていないリスト項目だけに取り消し線をつける」といった、条件ごとに違う見た目にしたい場面で活躍します。セレクタの組み合わせに慣れると、CSSの記述量をぐっと減らせるようになります。