CSSの疑似クラス:is()と:where()の違いを確認する動作テストツール

CSSの疑似クラスである :is() と :where() の違いを確認するために作成した動作テスト的なツールです。

プレビュー

HTML

2つの要素を用意し、それぞれにIDセレクタ(#is-target, #where-target)を付けています。

<!-- :is() のテスト -->
<div class="box" id="is-target">
	:is() の場合
</div>

<!-- :where() のテスト -->
<div class="box" id="where-target">
	:where() の場合
</div>

CSS

:is() は引数の詳細度を引き継ぎ、:where() は常に詳細度0になります。

/* ベースのスタイル (詳細度: 0-1-0) */
.box {
	color: #1E90FF; /* 青 */
	font-weight: bold;
	padding: 20px;
}

/* :is() 引数の #is-target の強さを引き継ぐため、.boxの指定を上書きする(詳細度: 1-0-0) */
:is(#is-target) {
	color: #ff4081; /* 赤 */
}

/* :where() 引数に関わらず詳細度は0のため、.boxに負けるので以下は適用されない(詳細度: 0-0-0) */
:where(#where-target) {
	color: #ff4081; /* 赤 */
}

:is() と :where() の違い（詳細度）

擬似クラス	詳細度の計算	このデモの場合	結果
:is()	引数の中で最も高い詳細度を採用	IDセレクタ相当 (1-0-0)	赤 (#ff4081) が勝つ (.box の 0-1-0 より強い)
:where()	引数に関わらず常に 0 (0-0-0)	なし (0-0-0)	青 (#1E90FF) が勝つ (.box の 0-1-0 に負ける)

解説

:is() と :where() はどちらも複数のセレクタをまとめることができますが、詳細度（Specificity）の扱いに決定的な違いがあります。

:is() ... 引数リストの中で最も詳細度が高いセレクタの値を、擬似クラス全体の詳細度として使います。
このデモでは :is(#is-target) は #is-target と同じ詳細度(1-0-0)を持つため、クラスセレクタ .box (0-1-0) よりも優先され、文字色が赤になります。
:where() ... 引数にどんな強力なセレクタ（IDなど）が含まれていても、擬似クラス自体の詳細度は 0 になります。
このデモでは :where(#where-target) の詳細度は0になるため、クラスセレクタ .box (0-1-0) の方が優先され、文字色は青のままになります。