CSSの :not が効かない時にハマりがちな3つの罠

CSSで便利なのが : :not  という疑似クラス

  • 全体に対して body *  するとき、
  • 全div要素に同じスタイルを指定するとき、

そういうとき、要素を一部除外したいときに便利です。

でも :not  が効かないことが結構多くて困る

意外と落とし穴が多かったので、
ここでは CSSの :not が効かない原因トップ3 をまとめてみました。

原因1.クラスやIDを一括指定しているから

普通のCSSに慣れてる人ほどそうですが・・・

クラスとかIDってまとめて指定しがち

でも :not  に関してはこの常識は通用しません。

 

例えば次みたいな5つの要素を作ってみます。

▼ 適当に作ったHTML例

▼ 見やすさのために追加したCSS

▼ デフォルトの見た目

div要素とspan要素が入り混じった5つのボックス要素

div要素とかspan要素が入り混じり、クラス名もバラバらな感じ

 

ここでは .a2  と .a4  以外にスタイル適用したいとします。

そのとき、次のようなCSSを書くのがダメってことです。

▼ 期待通りにならない :not の例

上手くいきそうな気がするけど全く動作しません。

 

正しくは 次のような回りくどい書き方 をしないとダメです。

▼ 実際はこう書かないとダメだった・・・

▼ このCSSを適用した後の見た目

:notで複数クラスを指定したボックス要素。実は複数クラスを指定するには特殊な書き方が必要

どうやら【ID、クラスをコンマ区切り】は未対応なブラウザが多い模様

面倒でもこのように書く習慣をつけた方がいいかもしれません。

原因2.:not は子孫要素を除外してくれない

お次に多いのが子孫要素のトラブル

これが意外と落とし穴というかハマりポイントですね。

 

たとえば次みたいな普通のulリストがあるとしましょう。

▼ リストのHTML例

 

このリスト自体を除外するために次のCSSを書いてみました。

単純に要素の背景色をミドリ色にするCSSです。

▼ リストを除外するCSS例(間違い)

▼ ん?・・・リスト項目に適用されてる・・・?

:notを使ってul要素を除外しようとしたけど、li要素にCSSが適用されてしまった例

実は :not って渡されたセレクタしか除外してくれません。

この例なら、ul要素だけ除外で子孫(li要素)は含めるってことです。

 

正しくはこう書かないとダメ!

▼ 正しく修正したCSS例

▼ 今度はちゃんとul要素全体を除外できた

ul要素などの子要素を持つ要素全体に :not を適用する時、子孫要素は含まれないことに要注意!

子要素を持つ要素を除外するなら、:not を使うのは慎重に・・・

原因3.:not の中に :not を入れ子できない

残念ながら :not の入れ子も不可

できたら便利だけど仕様的に禁止されてます。

 

▼ ダメなのが次みたいなCSS

厄介なのは「この書き方でもいけるかな?」と思ってしまうこと

もし :not の入れ子をドヤ顔で書いてるコードを見つけたら、、、
「そんな書き方はできないからヤメてね」と優しく指摘してあげましょう。

 

ちなみに上の例なら、こう書くのが正しいですね。

▼ 正しく修正したCSS例

このように :not は入れ子ではなく、並列に並べて使います。

だから「■■要素以外の中にある ●●要素以外 を除外」みたいには書けません。

多分 :not が効かない原因は他にもある

ここまでの原因をまとめると次の通り

もちろん他にも :not が効かない原因は他にもあります。

でも効かないときはこの3つを疑うと大抵は期待通りになるはずです。

以上、CSSの :not が効かない原因でした。ではまた($・・)/~~~

CSS

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください