CSSの「詳細度」を支配する：`:is()`の裏側と、僕らが陥る罠について
やあ。今日もコンポーネントのスタイリングで頭を抱えているかい？
フロントエンドの現場で長く生き残っていると、たまに「CSSがなぜか当たらない」「意図せず上書きされてしまう」という、CSSあるあるの泥沼に足を取られることがある。
特に、最近のCSSで強力な武器となる `:is()` 擬似クラス。これ、便利すぎて思考停止で使っていると、足元をすくわれるぞ。今日は、この `:is()` が持つ「詳細度（Specificity）の決定ロジック」という、現場で最も誤解されやすい罠について深掘りしよう。
—
`:is()` の詳細度は「一番強いやつ」に合わせる
まず、結論から言おう。`:is()` 擬似クラス自体の詳細度は、その引数の中に含まれるセレクタのうち、最も詳細度が高いものが採用される。
これは、従来の `:not()` や `:has()` が「セレクタとしてカウントされない（詳細度が0）」という挙動と明確に異なる点だ。ここを勘違いしていると、デバッグ中に「えっ、なんでこのスタイルが勝つの？」と30分溶かすことになる。
実例で見てみよう
/ 1. 普通のクラス /
.button { color: blue; }
/ 2. :is() を使ったセレクタ /
/ :is(.btn, #main .nav) の詳細度は、#main .nav (IDセレクタを含む) と同等になる /
:is(.btn, #main .nav) {
color: red; / こちらが優先される /
}
ブラウザは `:is()` を解釈するとき、「引数の中で最も重いセレクタ」を拾い上げ、それをその `:is()` の詳細度として扱って計算するんだ。つまり、`:is()` を使ったからといって詳細度がリセットされるわけじゃない。むしろ、書き方によっては意図せず詳細度を爆上げしてしまう「時限爆弾」になり得るということだ。
—
なぜこれが現場で問題になるのか
チーム開発をしていると、つい「セレクタを短く書けるから」という理由だけで `:is()` を多用したくなる。しかし、詳細度の計算ルールを意識せずに適当なセレクタを放り込むと、将来的なスタイルの上書きが困難になる。
例えば、こんなコードを見てくれ。
/ 共通コンポーネントのスタイル /
.card .title { font-size: 16px; }
/
- 修正用として追加したつもりが、
- .card #header .title というIDを含んだセレクタを :is() に入れたせいで、
- 今後どんなに強力なクラスを当てても上書きできない「詳細度の怪物」が生まれる
/
:is(.card .title, .card #header .title) {
font-size: 20px;
}
この `:is()` は、IDセレクタを含んでいるため、非常に高い詳細度を持つ。後から「特定のカードだけ少し小さくしたい」と思っても、同じかそれ以上の詳細度を持つセレクタを強引に書かない限り、CSSは無視され続ける。これが「CSSのスパゲッティ化」の第一歩だ。
—
実践：`:is()` を賢く使いこなすためのTips
では、どうすればいいか？ 実務レベルで推奨したいのは、「`:is()` の中身はなるべく詳細度を揃える」ということだ。
良い例：詳細度を平準化する
/ どちらもクラスのみなので、詳細度は「クラス1つ分」で安定する /
:is(.header, .footer, .sidebar) .link {
color: #333;
}
/ 悪い例：詳細度がバラバラ /
/ これだと、一番左の .header .link の詳細度が .container #main .link に引きずられて上がる /
:is(.header .link, .container #main .link) {
color: #666;
}
もし詳細度を一定に保ちたい、あるいは意図的に下げたいのであれば、モダンCSSのもう一つの切り札、`:where()` を検討してほしい。
`:where()` という選択肢
`:where()` は `:is()` と書き方は同じだが、詳細度が常に0だ。
/ これなら、後からどんなクラスでも簡単に上書きできる /
:where(.header, .footer) .link {
color: #333;
}
—
まとめ：CSSアーキテクトとしての視点
1. :is() の詳細度は「引数の中で最大のもの」に依存する。
2. 安易な `:is()` の使用は、詳細度を意図せず釣り上げ、メンテナンス性を下げる。
3. 詳細度を管理下に置きたいなら `:is()`、詳細度を無視したいなら `:where()` を選ぶ。
CSSの設計において、僕たちが目指すべきは「詳細度と戦わないCSS」だ。`:is()` は便利な道具だが、それはあくまで「効率化」のためのもの。詳細度の計算をブラウザ任せにせず、自分たちでコントロールできるようになると、コードの品質は一段上のステージに行ける。
さて、そろそろ次のタスクだ。みんなも、自分の書いたCSSが「何という強さ（詳細度）」を持っているのか、一度立ち止まって考えてみてくれ。それが、優れたフロントエンドエンジニアへの近道だ。
コメント