2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

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

疑似セレクタ(: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クラスがついたもの以外を赤色にすることにできます。

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




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です