CSSの世界へようこそ。フロントエンドの迷宮へ足を踏み入れたばかりのあなたへ、今日は「CSSの最強の盾と矛」、つまり「詳細度（Specificity）」という少し厄介だけど面白いルールについてお話しします。
「なんで書いたはずのCSSが反映されないの！？」
そんな夜、誰にでもあるはずです。大丈夫、それはあなたが悪いんじゃなくて、CSSが決めた「強さのルール」を知らなかっただけ。今日はその中でも、特に最近の現場で頻出する「魔法の擬似クラス」たちの正体を解き明かしていきましょう。
—
詳細度って何？「スタイルの格付け」を理解しよう
まず、CSSには「どちらの命令を優先するか」を決める詳細度（Specificity）という格付けが存在します。
イメージしてみてください。あなたは今、スーパーにお買い物に来ました。
- タグ名（`div`や`p`）は「一般のお客さん」。
- クラス（`.class`）は「VIP会員」。
- ID（`#id`）は「VIP中のVIP、オーナー様」。
CSSは「より特別な存在の言うことを聞く」というルールです。IDが書かれたスタイルは、タグ名だけのスタイルよりも圧倒的に強い力を持っています。
—
厄介な「擬似クラス」と、その中に隠れたルール
さて、ここからが本題。`:is()`, `:where()`, `:not()` という、「括弧の中にセレクタを書く」擬似クラスたちについてです。彼らは詳細度を計算するとき、ちょっと特殊な動きをします。
1. `:is()`：強力な「味方の集団」
`:is()`は、「この中のどれかに当てはまるなら適用して！」というまとめ役です。
この子の強さは、「括弧の中にあるセレクタの中で、最も強いもの」を引き継ぎます。
/ 例：クラスとタグをまとめる /
/ この場合、一番強い「クラス(.btn)」の強さが適用されます /
:is(.btn, header, footer) {
background-color: skyblue; / どこにいてもクラスと同じ強さで主張します /
}
2. `:where()`：存在感を消す「影のフィクサー」
これが一番面白い。`:where()`は、`is()`と書き方は同じですが、詳細度がなんと「0」です。どれだけ中に強いセレクタを書いても、詳細度が上がらない。「存在しないかのように振る舞う」という不思議な子なんです。
/ 詳細度が0なので、後から別のルールで簡単に上書きできます！ /
:where(.sidebar, #main-content, div) {
color: gray;
}
「とりあえずデフォルト値は設定したいけど、後でガッツリ変更したい」という時、これほど便利なものはありません。
3. `:not()`：ひねくれ者の「それ以外」
`:not()`は、「〇〇以外に適用する」という指定です。
この子の強さは、「括弧の中にあるセレクタの強さ」をそのまま自分の詳細度としてカウントします。
/ 「.activeではない要素」に色をつける /
/ 詳細度は .active (クラス1つ分) と同じ強さになります /
:not(.active) {
opacity: 0.5;
}
—
比較表で整理してみよう
頭が混乱してきたら、この表を思い出してくださいね。
| 擬似クラス | 詳細度の計算 | 性格 |
| :— | :— | :— |
| `:is()` | 括弧内で一番強いものに合わせる | 仲間思いで頼もしい |
| `:where()` | 常に0 | 控えめだけど、いざという時役立つ |
| `:not()` | 括弧の中の強さをそのまま継承 | ちょっとひねくれ者だけど計算通り |
—
最後に：なぜこれを知っておく必要があるのか？
実務の現場では、コードが長くなればなるほど「詳細度戦争」が勃発します。「`!important`（絶対適用せよ！）」を乱発して解決するのは、最終手段。あれは「核兵器」と同じで、一度使うと後戻りできなくなります。
だからこそ、`:where()`でベースを弱く作っておき、必要に応じてクラスで上書きする……そんな「引き算の美学」を知っていると、あなたのCSSは驚くほどメンテナンスしやすく、誰からも愛されるコードになります。
最初は難しく感じるかもしれません。でも、ブラウザの「検証ツール」を開いて、実際に色が変わる様子を眺めているだけで、CSSは必ずあなたと仲良くなってくれます。
迷ったときは、またいつでもここに戻ってきてください。あなたのWeb制作という冒険を、心から応援していますよ。
コメント