CSSの疑似クラス:is()と:where()の違いを確認する動作テストツール
CSSの疑似クラスである :is() と :where() の違いを確認するために作成した動作テスト的なツールです。
プレビュー
2つの要素を用意し、それぞれにIDセレクタ(#is-target, #where-target)を付けています。
<!-- :is() のテスト -->
<div class="box" id="is-target">
:is() の場合
</div>
<!-- :where() のテスト -->
<div class="box" id="where-target">
:where() の場合
</div>: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) の方が優先され、文字色は青のままになります。
詳細度（Specificity）とは？
CSSのルールが競合した場合、どのスタイルを適用するかを決める優先順位のスコアです。「ID」「クラス」「タグ」の登場回数で計算され、スコアが高い方が勝ちます。
| スコア | 種類 | 強さ |
|---|---|---|
| 1 - 0 - 0 | ID (#id) | 一番強い |
| 0 - 1 - 0 | クラス (.class) | 中くらい |
| 0 - 0 - 1 | タグ (div) | 弱い |
※ !important はこれら全てよりも優先されます。
※ インラインスタイル（style="..."）は ID (1-0-0) よりも強い (1-0-0-0) です。
