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 jQuery

【簡単CSS・jQuery】上スクロール時のみヘッダー・ナビを固定表示する方法

更新日:2022.09.09
1889
HTMLCSS プログラミング

CSSだけでhover(ホバー)したら画像を拡大させる方法【jQuery不要】

2022.01.03
2235
HTMLCSS

CSSだけで行数を指定。三点リーダーを表示する方法

2023.04.18
752
HTMLCSS プログラミング

【簡単】CSSで数字を縦向き・縦書きにする方法【text-orientation: upright;】

2022.04.06
6614