Written by Kasumi

CSSで一部のhtml要素を除く否定疑似クラス:not()の使い方

複数の同じ要素にCSSでプロパティを付与してるが、一部のクラスが付いてる要素だけプロパティが付与されないよう無効(取り除く)にしたい。

また、取り除きたいクラスを複数指定したい。

このような悩みは否定疑似クラス:not()を使えば解決できます。

本記事では上記使い方について解説します。

否定疑似クラス:not()の書き方

p:not(.active) {
  color: red;
}

否定疑似クラス:not()の使用例です。

使い方はとても簡単。

指定要素の後に:not(取り除きたいクラス)を記述するだけでOKです。

上記コード例だとp要素にcolorプロパティを付与してますが、activeクラスが付与されてるp要素にはcolorプロパティが付与されなくなります。

取り除きたいクラスが複数ある場合

p:not(.active):not(.txt):not(.page) {
  color: red;
}

取り除きたいクラスが複数ある場合は:not(取り除きたいクラス)を繋げて記述すればOKです。

以上で解決です。

まとめ

JavaScriptなどは不要でCSSだけで実装できます。

参考にしてみてください。

以上で解説を終わります。

目次

関連記事

HTMLCSS プログラミング

【簡単CSS】横スクロールできない問題を解決する方法

2022.03.16
812
HTMLCSS プログラミング

【簡単】スマホのぱんくずを一行にして、はみ出した分を横スクロールで見せる方法

2022.01.17
108
HTMLCSS

input:text要素をクリックした時の枠線をCSSで変更する方法

2022.05.04
484
HTMLCSS jQuery

【簡単CSS・jQuery】左から右に流れるようなテキストアニメーションを実装する方法

更新日:2022.09.09
2078