CSSで同じ種類の要素のうち、特定の要素だけ適用しない方法。

概要

例えばページ内のdiv全部に適用しているスタイルがあるけど、
このひとつだけは適用したくない!
というときがありませんか?
そんなときに使える方法をご紹介します。

内容

否定擬似クラス”:not”を使います。
divのうち、クラスが指定してあるものは適用しない例で書いてみます。
スペースが入ると効かなかったりするので、注意してください。

クラス名で指定したければ、こう書きます。

全てのulの中のliに適用したいが、クラスが指定してあるulの方には適用しない場合などは、
このように”:not”のあとに記せばOKです。

まとめ

最初からクラス指定でスタイルを書いてあれば問題ないのですが、
あとから、ここだけ適用させたくない!
いままでのページ全部クラスに置き換えるの大変…
なんてときに使えますね!
“!important”で書き換えることはできますが、
無しにしたいときの手段が思いつかず、この方法になりました。

アコーディオンを実装していて、全ページの中身のdivを”display:none”にしてたけど、
1ヶ所だけ表示している状態からスタートの仕様にしたかったときに、
大変困っていたので…

そんな体験からこの方法を見つけました。

この記事を書いた人

アバター

グローディア 株式会社

グローディア株式会社アカウントです。