CSSで便利なのが : :not という疑似クラス
- 全体に対して body * するとき、
- 全div要素に同じスタイルを指定するとき、
そういうとき、要素を一部除外したいときに便利です。
でも :not が効かないことが結構多くて困る
意外と落とし穴が多かったので、
ここでは CSSの :not が効かない原因トップ３ をまとめてみました。
原因１．クラスやIDを一括指定しているから
普通のCSSに慣れてる人ほどそうですが・・・
クラスとかIDってまとめて指定しがち
でも :not に関してはこの常識は通用しません。
例えば次みたいな５つの要素を作ってみます。
▼ 適当に作ったHTML例
|
1 2 3 4 5 |
<div class="a1"></div> <div class="a2"></div> <span class="a3"></span> <span class="a4"></span> <span class="a5"></span> |
▼ 見やすさのために追加したCSS
|
1 2 3 4 5 6 |
body div, body span{ display: block; width: 50px; height: 50px; margin: 4px; background: lightgray; } |
▼ デフォルトの見た目
div要素とかspan要素が入り混じり、クラス名もバラバらな感じ
ここでは .a2 と .a4 以外にスタイル適用したいとします。
そのとき、次のようなCSSを書くのがダメってことです。
▼ 期待通りにならない :not の例
|
1 2 3 |
body :not(.a2, .a4){ background: lightgreen; } |
上手くいきそうな気がするけど全く動作しません。
正しくは 次のような回りくどい書き方 をしないとダメです。
▼ 実際はこう書かないとダメだった・・・
|
1 2 3 |
body :not(.a2):not(.a4){ background: lightgreen; } |
▼ このCSSを適用した後の見た目
どうやら【ID、クラスをコンマ区切り】は未対応なブラウザが多い模様
面倒でもこのように書く習慣をつけた方がいいかもしれません。
原因２．:not は子孫要素を除外してくれない
お次に多いのが子孫要素のトラブル
これが意外と落とし穴というかハマりポイントですね。
たとえば次みたいな普通のulリストがあるとしましょう。
▼ リストのHTML例
|
1 2 3 4 5 6 7 |
<ul> <li><span>エクレア</span></li> <li><span>ドーナッツ</span></li> <li><span>キットカット</span></li> <li><span>オレオ</span></li> <li><span>カップケーキ</span></li> </ul> |
このリスト自体を除外するために次のCSSを書いてみました。
単純に要素の背景色をミドリ色にするCSSです。
▼ リストを除外するCSS例（間違い）
|
1 2 3 |
body :not(ul) span{ background: lightgreen !important; } |
▼ ん？・・・リスト項目に適用されてる・・・？
実は :not って渡されたセレクタしか除外してくれません。
この例なら、ul要素だけ除外で子孫（li要素）は含めるってことです。
正しくはこう書かないとダメ！
▼ 正しく修正したCSS例
|
1 2 3 |
body :not(ul):not(li) span{ background: lightgreen !important; } |
▼ 今度はちゃんとul要素全体を除外できた
子要素を持つ要素を除外するなら、:not を使うのは慎重に・・・
原因３．:not の中に :not を入れ子できない
残念ながら :not の入れ子も不可
できたら便利だけど仕様的に禁止されてます。
▼ ダメなのが次みたいなCSS
|
1 2 3 |
body :not(div:not(.a4)){ background: lightgreen; } |
厄介なのは「この書き方でもいけるかな？」と思ってしまうこと
もし :not の入れ子をドヤ顔で書いてるコードを見つけたら、、、
「そんな書き方はできないからヤメてね」と優しく指摘してあげましょう。
ちなみに上の例なら、こう書くのが正しいですね。
▼ 正しく修正したCSS例
|
1 2 3 |
body :not(div):not(.a4){ background: lightgreen; } |
このように :not は入れ子ではなく、並列に並べて使います。
だから「■■要素以外の中にある ●●要素以外 を除外」みたいには書けません。
多分 :not が効かない原因は他にもある
ここまでの原因をまとめると次の通り
もちろん他にも :not が効かない原因は他にもあります。
でも効かないときはこの３つを疑うと大抵は期待通りになるはずです。
以上、CSSの :not が効かない原因でした。ではまた($・・)/~~~
