疑似セレクタ(:not)の評価
頻出度
(3.0)
重要度
(3.0)
総合評価
(3.0)
目次
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クラスがついたもの以外を赤色にすることにできます。
疑似セレクタはなかなかイメージしづらいので実際に使ってみてどのようにスタイルが適用されるか確認するといいかと思います。