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.07.05
3662
HTMLCSS プログラミング

【簡単CSS】videoタグを使って動画を背景に設定する方法

2022.03.12
10603
HTMLCSS JavaScript

スクロールバーが表示されない。SimpleBarを使おう!【即解決】

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

【html】audioタグでダウンロードをさせない方法。

2021.12.27
5367