同じ要素を選ぶのに色が違う？:isと:whereの詳細度を比べよう

同じ要素へ同じ色を指定したつもりなのに、:isを:whereへ変えたら結果が違った。二つは条件をまとめられるけれど、詳細度の扱いが異なるよ。

今回は、クラスsampleを持つ二つの文を比べる。クラスとIDの基本を知っていると読みやすい。記事下の作例は、通信や保存をせずブラウザで試せるよ。

条件のリストで同じ要素を選ぶ

:is(#unused, .sample) { color: purple; }
.sample { color: green; }

作例の文は.sampleに一致し、#unusedというIDは持っていない。それでも:isの詳細度は、引数リストの中で最も高い詳細度の影響を受ける。今回はIDの条件が含まれるため、後ろのクラス指定より強くなるんだ。

「実際に一致したクラスだけの詳細度になる」と考えると、結果を読み違えるよ。

:where自身と引数の詳細度は0

:where(#unused, .sample) { color: purple; }
.sample { color: green; }

:whereの条件で同じ要素を選んでも、:whereとその引数は詳細度を増やさない。この例ではクラスの指定が優先され、緑になる。

ただし、:whereの外側に別のクラスや要素セレクターを付けた場合、その外側の詳細度まで0になるわけではないよ。今回は単独の:isと:whereを比べている。

作例で、クラスの上書きを切り替える

作例では、上の文へ:is、下の文へ:whereの規則を使い、後ろに書く.sampleの緑の指定をオン・オフできる。

1. 上書きオンでは、上が紫、下が緑になる。
2. オフでは、二つとも紫になる。
3. もう一度オンにし、選ばれる要素自体は同じでも色の決まり方が違うことを確認する。
4. 「最初から試す」でオンへ戻す。

表示は色の名前と、ブラウザが返した計算済みの色も付ける。色だけで説明を閉じないようにした作例だよ。

後ろに書いたものが常に勝つわけではない

CSSの優先順位には、詳細度以外にも出所、重要度、カスケードレイヤーなどの条件がある。今回は同じ作例内の通常の規則で、!importantやレイヤーを使わずに比較している。

詳細度が違う二つの規則なら、単純な記述順だけで決まるわけではない。問題が起きたときは、セレクターと、それ以外の優先条件も確認しよう。

編集部ではChromiumで、上書きの切替、二つの計算済み色、リセットを確認した。複雑なサイト全体の優先規則を、これだけで診断できるという検証ではないよ。

条件の基本はclassとid、状態に応じた指定はfocus-withinも参考にしてみよう。