[CSS] 疑似クラス is() とwhere() の使い方と違い

CSSの比較的新しい疑似クラス :is() と :where() の使い方と違いについてまとめました。

:is()

:is() の括弧内に複数のセレクタをカンマ区切りで指定すると、異なるセレクタにまとめて同じスタイルを適用できます。

/* 従来の書き方 */
.cols_2 div ,
.cols_2 li ,
.cols_2 article {
	width: calc(100% / 2 - 40px / 2);
}

/* :is() を使った書き方 */
.cols_2 > :is(div, li, article) {
	width: calc(100% / 2 - 40px / 2);
}

/* 従来の書き方 */

.cols_2 div ,

.cols_2 li ,

.cols_2 article {

width: calc(100% / 2 - 40px / 2);

}

/* :is() を使った書き方 */

.cols_2 > :is(div, li, article) {

width: calc(100% / 2 - 40px / 2);

}

:where()

:where() の構文と機能は、 :is() と同じです。

:where(div, li, article) {
	width: calc(100% / 2 - 40px / 2);
}

:where(div, li, article) {

width: calc(100% / 2 - 40px / 2);

}

では、両者はどこが違うのでしょうか？

:is() と :where() の違い

:is() と :where() の違いは、セレクタの詳細度（優先度）にあります。

言葉では分かりにくいので、以下のサンプルを見てみましょう。

See the Pen :is() と :where() の違い by mkl may (@mkl-may) on CodePen.

where の例では、枠線の色が緑色に上書きされました。

:is() は、括弧内のセレクタの詳細度も合算されるため、セレクタ全体の詳細度が高くなる
その結果、.is-example:is(.box) は .box よりも強く、赤色の枠線が適用されます。
:where() は括弧内に何を指定しても詳細度が常に 0 のままになる
そのため、.where-example:where(.box) よりも .box の詳細度が高くなり、緑色の枠線が優先されます。

セレクタの詳細度についてさらに学びたい方はこちらの記事もチェックしてみてください。