cssの「:where」と「:is」の違いを理解する

cssの:whereと:isの違いについて理解できていなかったため、違いなどについてまとめていこうと思います。

MDNの情報から

:whereについて

developer.mozilla.org

:where() は CSS の擬似クラス関数で、セレクターリストを引数として取り、列挙されたセレクターのうちの何れかに当てはまるすべての要素を選択します。

/* ヘッダー、メイン、フッターの何れかの中にある段落に
   カーソルをかざしたときに選択 */
:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/* 上記のものは下記のものと同等です。 */
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

:isについて

developer.mozilla.org

:is() は CSS の擬似クラス関数で、セレクターのリストを引数に取り、リスト中のセレクターの何れか一つに当てはまる要素をすべて選択します。数多くのセレクターを小さくまとめて書くのに便利です。

/* header, main, footer 要素の中の段落で
   マウスポインターが通過中のものをすべて選択 */
:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/* 上記のものは下記のものと同等です。 */
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

:whereと:isの違いについて

developer.mozilla.org

この 2 つの違いは、 :is() がセレクター全体の詳細度にカウントされる（最も詳細な引数の詳細度を取る）のに対し、 :where() は詳細度の値が 0 であることです。これは、 :where() 参照ページの例で実証されています。

今回検証したものについて

classの上書きについて

• 「テキスト」の部分が対象
• 上2つに.cardのclassを付与。.cardに対して黒色を指定
• :isに赤色を指定
• :whereに青色を指定

See the Pen where and is by miwa_shuntaro (@miwashutaro0611) on CodePen.

「:is」のちょっとした例について

• cardという同じUIスタイル
• aタグの場合は文字色を赤色・その他の場合はスタイルを適応させない
  • 今回は文字色でやっていますが、ホバー時の追加などしたい時に有効かもしれないです。

See the Pen link text add color by miwa_shuntaro (@miwashutaro0611) on CodePen.

「:where」のちょっとした例について

• 「タイトル」の部分が対象
• class名部分で font-size: 20px、h1部分でfont-size: 10pxで宣言している

See the Pen title reset where by miwa_shuntaro (@miwashutaro0611) on CodePen.

sanitize.cssで:whereを用いたスタイルのリセットを用いられています。

github.com

結論

• リセットcssとして使用するのであれば、:where
• 指定の条件（aタグでhogeのclass名がついているとき）には:is