cssの疑似クラス:not()

Question

前提・実現したいこと

cssで短いコードで書きたい
説明より以下見てもらうほうが早いはずです

:notを使わなくても最適化された書き方があればOKです

該当のソースコード

2通り(親孫、親子)のwapで包んだa要素を触りたいとき。

テスト1

<div class="wap"> <h3><a href="#">h3</a></h3> <p><a href="#">a</a></p> </div>

テスト2

<p class="wap"><a href="#">a</a></p>

css もちろん以下↓で反応する

.wap a{
font-size: 200%;
}

このとき、wap h3 aに適応したくないとき疑似クラス:not()を使い

.wap :not(h3) a{
font-size: 200%;
}

としてみました。するとテスト1は意図した動きになり、「テスト2は反応しない。」
という結果が起こっています。

試したこと

.wap a{
font-size: 200%;
}
.wap h3 a{
...
}

などと上書きすれば一応意図した結果は取得できるがこう書きたくない

この挙動の理由とスマートな書き方があれば教えて下さい。
よろしくお願いします。

Answer 1

.wap :not(h3) a は .wap *:not(h3) a を省略したものです。
.wap の子孫の何か(h3を除く)の更に子孫である a を指していますので、 .wap 直下にある a には適用されません。

素直に次のように書くのがよいと思います。

.wap :not(h3) a,
.wap > a {
}

Comments

[thyda.eiqau]

ちなみに、混乱の原因になるので、全称セレクタ (*) は省略しないことが推奨されているようです。
> Note: it is recommended that the * not be omitted, because it decreases the potential confusion between, for example, div :first-child and div:first-child. Here, div *:first-child is more readable.
-- https://drafts.csswg.org/selectors-3/#universal-selector

[tonpoko]

回答をありがとうございます。なるほど! 全称セレクタ混乱してました。そこに原因ありそうなのは感じていたのですがどうしても腑に落ちなくて。これでスッキリです!