【CSS】:is() と :where()

: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にしておくとよさそう