CSSの擬似クラス、:not()の地味な落とし穴にハマった話

めちゃくちゃ地味な記事なんですが、:not()を使用した際に地味な部分でひっかかって時間を要してしまったので、備忘録的に残しておきます。

:not()ってどんなCSS

そもそも:not()クラス、使ったことありますか？

:not()は擬似クラスであり、つけられたセレクタ以外のものを選択するクラスになります。

書き方は以下。

上をstylesheetに入れると、aタグ以外のcolorがすべて黒色になります。

:not()が使える場面

:not()が使えるのは、例えばliタグの最後の要素以外にmargin-bottomをつけたいといった場合。

とすれば最後だけつけないで済みます。
※そりゃul>li:last-child{margin-bottom:0;}でもいいんですけどね。

今回ハマった部分

MDN Web Docsの例を見ると、以下の記述がありました。

HTML

<p>I am a paragraph.</p> <p class="fancy">I am so very fancy!</p> <div>I am NOT a paragraph.</div>

1 2 3

<p>I am a paragraph.</p> <p class="fancy">I am so very fancy!</p> <div>I am NOT a paragraph.</div>

CSS

～略～ /* <p> 要素ではない要素 */ body :not(p) { text-decoration: underline; } ～略～

1 2 3 4 5 6

～略～ /* <p> 要素ではない要素 */ body :not(p) {   text-decoration: underline; } ～略～

上の結果はHTMLの3行目、＜div＞I am NOT a paragraph.＜/div＞のみが対象になります。

これを見て私は以下のようなCSSを記述したんです。

私がCSSを反映させたかったのは「.mainpageクラス内の.hogeクラスが付与されてないh2タグ」に対してでした。
が、上のCSSだとどうなったかわかりますか？

.mainpage h2:not(.hoge)の結果

結果は「.mainpageクラスの.hogeクラスが付与されてないh2タグ」以外のh2すべてに反映されました。

「え、狙ってたタグなんじゃ？」って思いますよね。
いや、違うんです。

私が反映させたかったのは、.mainpageクラス＞.hogeじゃないh2だったんですが、上のCSSだと.mainpageクラス.hogeじゃないh2タグ。
つまりmainpageクラスの上の階層、bodyタグのh2タグにまで反映されたんです・・・！！
・・・ﾆﾎﾝｺﾞﾑｽﾞｲ。

結果発生したこと

比較的後半に上のCSSを入れてたからなのですが、.subpage h2とかにまで反映され、.subpage h2にいくらmarginを付与しようとも上書きされmarginが変わらないという落とし穴にハマりました。
最初原因がわからず、結構な時間を費やし「まさか？」と該当するコードを削除したら反映されたときの絶望感・・・。

切ないですね。
てっきり.mainpageのh2タグだけに反映されると思ってました。
おそらくですが私の頭の中ではjQueryの.not()と混同してたんだと思います。

シンプルなソースにすればそもそもこういったことは発生しないので、もっと単純明快なソースを書けるようがんばります。
それではまた。