グローディアのサービス一覧はこちら
 

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

概要

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

内容

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


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


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



まとめ

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

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

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

※記事の内容は保証はしておりません(執筆時期や実施環境により挙動が変わるものがある為)。
別途検証してご利用いただくことをおすすめいたします。

グローディアのサービス一覧はこちら