[CSS] 疑似セレクタ「:not」で指定した条件を除いた要素にスタイルを適用しよう!

1.疑似セレクタ「:not」とは?

疑似セレクタ「:not」は「要素名:not(条件) { ~ }」のカッコ内で指定した条件に一致する対象を除いた要素にスタイルを適用します。

2.疑似セレクタ「:not」の使い方

それでは疑似セレクタ「:not」の使い方をみていきましょう。

・・・

<ul>
 <li>リスト1</li>
 <li class="list">リスト2</li>
 <li>リスト3</li>
</ul>

・・・

li:not(.list) {
 color: red;
}

上記のように書いた場合、listクラスがついたもの以外を赤色にすることにできます。

疑似セレクタはなかなかイメージしづらいので実際に使ってみてどのようにスタイルが適用されるか確認するといいかと思います。