こんにちは。CSSという広大な森へようこそ。
CSSを書き始めてしばらくすると、誰もが一度はこんな壁にぶつかります。
「あれ、このコード、ちゃんと書いたはずなのに全然色が反映されないぞ……？」
まるで魔法が効かないようなこの現象、実はCSSの「詳細度（Specificity）」という隠れたルールがいたずらをしている可能性が高いんです。今日は、特に最近よく使う「構造的疑似クラス（`:nth-child` や `:has` など）」に焦点を当てて、この「優先順位の不思議」を解き明かしていきましょう。
—
そもそも「詳細度」って何？
詳細度とは、CSSが「どのルールを一番優先して適用するか」を決めるための通信簿のようなものです。
想像してみてください。あなたは今、冷蔵庫の中にある「余り物の野菜」を使って料理を作ろうとしています。
- 「冷蔵庫にあるもの全部使え！」という指示（全体ルール）
- 「でも、一番手前にあるキャベツは先に使ってね！」という指示（詳細なルール）
CSSもこれと同じで、「より具体的で、ピンポイントな指示を出しているやつが勝つ」というルールがあるんです。
—
構造的疑似クラス：実は「魔法のアイテム」
`first-child` や `nth-child`、そして最近の救世主 `:has` 。これらは、ただのセレクタではなく「特定の条件を満たすやつだけ狙い撃ちする」ための武器です。
ここで重要なのは、「疑似クラスも詳細度の計算に含まれる」ということ。
例えば、ただの `li` タグよりも、`:nth-child(2)` を使った `li:nth-child(2)` の方が、より「特定の場所を指している」ので、優先順位が少し高くなるんです。
実際に優先順位を確かめてみよう
以下のコードを見てみてください。
/ 1. 普通のリストのスタイル /
li {
color: gray; / 基本はグレー /
}
/ 2. 2番目の要素だけ特別に赤くしたい！ /
li:nth-child(2) {
color: red; / ここで詳細度が発動！ /
}
/ 3. もし、これでも色が反映されないときは…？ /
/ 下記のようなクラス名で囲むと、詳細度がさらに強くなります /
.list-wrapper li:nth-child(2) {
color: blue; / クラスという「タグ」が重なるので最強になります /
}
「あれ？さっきまで赤かったのに、青になったぞ？」と思ったあなた。鋭いです。これが詳細度のパワーバランスです。「タグ（li）」よりも「クラス名（.list-wrapper）」が付いている方が、CSS界ではエライとされているからなんですね。
—
なぜ `:has` は最強の切り札と言われるのか
最近のフロントエンド界隈で熱狂的に迎え入れられているのが `:has` 疑似クラスです。これは「特定の条件を持っている親要素」を狙い撃ちできる、まさに魔法の杖。
/ 「中にチェックボックスが入っている時だけ、背景を薄い黄色にする」 /
li:has(input:checked) {
background-color: lightyellow;
}
この `:has` も、詳細度の計算では「クラス名」と同じくらいの重みを持っています。ですので、後から書いたコードで無理やり上書きしようとしても、「あれ、全然効かない……」と悩むことが出てくるはずです。
そんな時は、「無理やり上書きしようとせず、詳細度を合わせる（または同じセレクタの強さで書く）」のが、プロの現場でのスマートな解決策です。
—
つまずいた時の「魔法の処方箋」
CSSを書いていて「優先順位で負けてしまった！」と悔しい時は、以下のことを思い出してみてください。
1. 「とりあえず `!important` をつける」のは最終手段に。
お薬の副作用と同じで、多用すると後でメンテナンスができなくなります。まずはセレクタの「具体性」を見直しましょう。
2. CSSの順番を意識する。
同じ強さのセレクタなら、「後から書いたもの」が優先されます。「これ効かないな？」と思ったら、コードの場所を入れ替えるだけで直ることも多いですよ。
3. ブラウザの「検証ツール」を相棒に。
ブラウザ（Chromeなど）で右クリック→「検証」を押してみてください。右側に表示される「Styles」パネルを見ると、どのCSSが打ち消されていて、どれが勝っているのかが一目で分かります。これが一番の近道です。
—
最後に：CSSは「積み重ね」の芸術
詳細度の計算ルールは、最初はパズルのように感じるかもしれません。でも大丈夫、焦る必要はありません。僕も駆け出しの頃は、毎日のように優先順位と喧嘩していましたから。
大事なのは、「CSSは上から下に読むこと」「具体的であるほど強くなること」という二つの柱を心に置いておくこと。
今日のこの小さな気づきが、あなたの書くコードをより美しく、そしてトラブルの少ないものへと変えていくはずです。迷った時はいつでも、この基本に立ち返ってみてくださいね。
また一緒に、CSSの深い森を散歩しましょう！
コメント