CSSの:not()が効かないときー

ハマったのでメモ。

次のような、サイトトップページと下層ページの2種類のページがあり、下層ページ配下にのみpタグに所定のCSSを適用したいとする。

サイトトップページ

<html>
<head>
<title>サイトページ</title>
</head>
<body class="sitetop">
<p>テストですテストですテストですテストですテストですテストですテストです</p>
</body>
</html>

下層ページ

<html>
<head>
<title>下層ページ</title>
</head>
<body>
<p>テストですテストですテストですテストですテストですテストですテストです</p>
</body>
</html>

まず、CSSを次のように設定してみたところ、上手く行かず。

:not(.sitetop) p {
text-align: center;
}

次のように修正すると、上手く行った。

body:not(.sitetop) p {
text-align: center;
}

以上踏まえて、MDNを見ると次のようにあったので、要素の指定が曖昧だとうまく動かない仕様みたい。

:not(.foo) は .foo ではないすべての要素を選択するため、<html> や <body> も選択します。

knowledge ::short