cssで:not否定疑似クラスを使うと優先度がおかしくなる件

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="UTF-8">
5        <link rel="stylesheet" type="text/css" href="xxx.css">
6    </head>
7    <body>        
8        <div class="xxx">
9            <p>赤は適応されない</p>
10        </div>
11
12        <p>普通に赤</p>
13
14        <div class="green">
15            <p>ここは緑（何故か赤になる）</p>
16        </div>
17
18    </body>
19</html>

css
1p:not(.xxx p){
2    color: red;
3}
4
5.green p{
6    color: green;
7}
8

p:not(.xxx p)で.xxxのpタグは赤が適用されないようにしてあります。

.greenのpタグに緑を指定して赤になるのはどうしてですか。

行動規範の内容に同意します

回答2件

否定擬似クラスである :not() 自身は重みがありません。 :is() や :has() 擬似クラスも同様です。しかし、これらのセレクターの引数は重みを持ちます。
詳細度 - CSS: カスケーディングスタイルシート | MDN

投稿2024/04/23 08:04

Lhankor_Mhy

総合スコア36134

_L9u7c4i0a

2024/04/23 08:15

回答ありがとうございます。非常に参考になりました。

Lhankor_Mhy

2024/04/23 08:19

p:where(:not(.xxx p)) のように :where() で包むと詳細度計算から除外できます。

行動規範の内容に同意します

https://developer.mozilla.org/ja/docs/Web/CSS/Specificity
CSS 詳細度の問題ではないかと。

詳細度の影響確認手段として、.green p のセレクタを .green.green p → .green.green.green p と詳細度だけを上げる(他は一切変えない)ような変更をしていくと、p:not(.xxx p)と詳細度が同じになったタイミングでより後にでてくるgreenの方が優先されるようになるのが確認できるはずです

投稿2024/04/23 08:04