CSSの深淵へようこそ。
日々フロントエンドの現場でコードを書いていると、必ず一度は「なぜこのスタイルが当たらないんだ！」というデバッグの泥沼に足を取られるはずだ。特に `:is()`, `:where()`, `:not()` といった「機能性擬似クラス」が登場してからというもの、詳細度の計算式はより複雑で、かつパワフルになった。
今回は、この「擬似クラスの詳細度」という、多くのエンジニアが感覚で済ませがちな領域を、プロとして解剖していこう。
—
1. 擬似クラスの詳細度：その「計算ルール」を解き明かす
まずは基本の復習だ。詳細度（Specificity）は大きく分けて「ID」「クラス・擬似クラス・属性」「要素・擬似要素」の3つの重みで決まる。
ここで重要なのは、「`:is()` や `:not()` は、引数の中で最も強い詳細度を継承する」というルールだ。
/ この場合、.card はクラスなので、詳細度は「クラス1つ分」として計算される /
:is(.card, #header) { color: red; }
/ もし引数にIDが含まれていれば、全体がID級の詳細度を持つことになる /
:is(.card, #header) { color: blue; }
/ ↑ 結果： #header の詳細度が引き継がれるため、これ単体でIDと同等の重みを持つ /
この「可変的な詳細度」は非常に強力だが、同時に「どこで何が上書きされているのか」を追跡しづらくさせる諸刃の剣でもある。
—
2. `:is()` と `:where()` の決定的な違い
現場で最も混乱を招くのがこの二人だ。挙動は似ているが、詳細度に関しては真逆の性質を持っている。
- `:is()`：引数の中で最も強い詳細度を「引き継ぐ」。
- `:where()`：詳細度が常に「0」。
この違いを理解しておくと、CSS設計のレベルが一つ上がる。
実務で使える使い分けの具体例
例えば、リセットCSSやベーススタイルを書くとき、`:where()` を使うと、後から詳細度を気にせず上書きできるため、非常にクリーンな設計が可能になる。
/ 1. :where() を使う場合：詳細度は 0 なので、後から簡単に上書きできる /
:where(header, footer) p {
margin: 0;
color: #333;
}
/ 2. 普通に書くと詳細度は 10 (要素セレクタ×2) /
header p {
color: #333;
}
/ 3. :is() を使うと、引数の中で一番強い詳細度を持つ /
:is(.sidebar, .main) a {
color: blue;
}
シニアからのアドバイス：
コンポーネントライブラリやユーティリティCSSを作るなら、`:where()` を活用して「詳細度ゼロ」のベースを作っておくのが定石だ。これにより、利用者側が `:where()` の詳細度と戦う必要がなくなり、DX（開発者体験）が劇的に向上する。
—
3. `:not()` の罠と活用法
`:not()` も `:is()` と同様に「引数内の最大詳細度を継承」する。ここで注意すべきは、`!important` との兼ね合いだ。
/ .btn クラスを持たない要素にスタイルを当てる /
:not(.btn) {
padding: 10px;
}
このとき、もし引数に複雑なセレクタを入れると、詳細度が跳ね上がる。「 `:not()` だから詳細度は低いだろう」と高を括っていると、思わぬところで上書きを食らうことになる。
—
4. 現場ですぐに使えるベストプラクティス
最後に、これらの擬似クラスを使いこなすための「現場の知恵」を共有しよう。
/ 1. リセット系は常に :where() で詳細度を殺す /
:where(ul, ol) {
padding: 0;
margin: 0;
}
/ 2. 状態管理には :is() を活用してコードをDRYに保つ /
/ 冗長な記述を避けるための :is() の正しい使い方 /
:is(h1, h2, h3, h4) {
font-weight: 700;
line-height: 1.2;
}
/ 3. デバッグ時は「詳細度の計算機」を過信せず、ブラウザの検証ツールを見る /
/
Tips:
Chromeの検証ツールでセレクタにマウスを乗せると、
Specificity(0, 1, 0) のように詳細度が表示される。
これが (0, 0, 0) になっているか確認する癖をつけよう。
/
結論：プロの矜持
CSSにおいて最も恐ろしいのは、「なぜか動く」状態を放置することだ。
`:is()` や `:where()` は、書く量を減らしてくれる便利なツールだが、同時に「詳細度」というCSSの根幹を揺るがすパワーを秘めている。「デフォルトで上書きしやすく作る（:where）」のか、「意図的に詳細度を上げて制御する（:is）」のか。この意図をコードに込められるようになったとき、君はもう中級エンジニアの枠を超えているはずだ。
さあ、エディタを開いて、君のCSSをより洗練されたものに書き換えてみてほしい。健闘を祈る。
コメント