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だけで実装できます。
参考にしてみてください。
以上で解説を終わります。
目次
