:is()
と:where()
の違いがよくわからなかったので調べた
developer.mozilla.org
developer.mozilla.org
:is()
と:where()
はどちらもCSSの擬似クラス関数で、セレクターリストを引数として取り、列挙されたセレクターのうちの何れかに当てはまるすべての要素を選択する
そして、以下のように使用する
:is(header, main, footer) p:hover { color: red; cursor: pointer; } /* 上記のものは以下のものと同じ */ header p:hover, main p:hover, footer p:hover { color: red; cursor: pointer; }
:where(header, main, footer) p:hover { color: red; cursor: pointer; } /* 上記のものは下記のものと同等です。 */ header p:hover, main p:hover, footer p:hover { color: red; cursor: pointer; }
:is() と :where() の違い
:is()
と :where()
の違いは、
:is()
がセレクターリストのうち最も詳細な引数の詳細度を取るのに対し、
:where()
は詳細度は 0 であるため上書きがしやすいこと
例えば、以下のHTMLに
<main> <h1 id="id">headline</h1> <div class="h-1">text</div> </main>
以下のスタイルをあてるとすると
main :is(h1, .h-1, #id) { color: pink; } h1 { color: blue; } div.h-1 { color: blue; }
になる
これは:is
の詳細度が:is(h1, .h-1, #id)
の引数のうちの#id
の詳細度をとるので、h1
やdiv.h-1
よりも詳細度が高いため(青色で上書きができない)
つぎに、これを:is
→:where
に変更する
main :where(h1, .h-1, #id) { color: pink; } h1 { color: blue; } div.h-1 { color: blue; }
この場合、:where
の詳細度は 0 のため
になる
ベースCSSなどは:where
にしておくとよさそう