Surprising Facts About New CSS Selectors

最近出てきた CSS Selector、:has, :where, CSS nesting を is, not などのセレクタと比較しながら詳細度を見ていく記事

例えば…1

code:style.css

#unique { color: red; }

.intro { color: orange }

p { color: green; }

code:style.html

この場合 ID セレクタが優位となるため文字は赤くなる

code:style.css

:is(#unique, p) { color: red; }

.intro { color: green; }

code:style.html

ID 指定はHTMLにないので緑になるように思えるがこの場合もまた赤くなる

:is のリストに与えた ID セレクタにより詳細度は :is が高くなる

ところが :where は :is と同じに振る舞うものの、詳細度は0になる

https://gyazo.com/d05d64f8ea89fce06e2d7f6af0233f10

例えば…2

code:style.css

:-webkit-full-screen, :fullscreen { border-color: green; }

これはパースに失敗する可能性がある

ところが :is を使うことで寛容なセレクターリストを受け取ることができるのでパースに失敗することがない

:where も可能

code:style.css

:is(:-webkit-full-screen, :fullscreen) { /*...*/ }

ところが :not は寛容なセレクターリストを受け取れない

しかし :not(:is(...)) とすることで実現が可能（コワッ