概要
例えばページ内のdiv全部に適用しているスタイルがあるけど、
このひとつだけは適用したくない!
というときがありませんか?
そんなときに使える方法をご紹介します。
内容
否定擬似クラス”:not”を使います。
divのうち、クラスが指定してあるものは適用しない例で書いてみます。
スペースが入ると効かなかったりするので、注意してください。
1 2 3 4 5 |
div:not([class]) { width:300px; margin-bottom:20px; } |
クラス名で指定したければ、こう書きます。
1 2 3 4 5 |
div:not([class="test"]) { width:300px; margin-bottom:20px; } |
全てのulの中のliに適用したいが、クラスが指定してあるulの方には適用しない場合などは、
このように”:not”のあとに記せばOKです。
1 2 3 4 5 6 |
ul:not([class]) li { width:150px; margin: 0px; background-color:#ff0000; } |
まとめ
最初からクラス指定でスタイルを書いてあれば問題ないのですが、
あとから、ここだけ適用させたくない!
いままでのページ全部クラスに置き換えるの大変…
なんてときに使えますね!
“!important”で書き換えることはできますが、
無しにしたいときの手段が思いつかず、この方法になりました。
アコーディオンを実装していて、全ページの中身のdivを”display:none”にしてたけど、
1ヶ所だけ表示している状態からスタートの仕様にしたかったときに、
大変困っていたので…
そんな体験からこの方法を見つけました。