CSSの詳細度 — なぜか色が変わらない、の正体
同じ要素に対して、いくつものCSSルールが「自分の色を使え」と主張することがあります。最後に書いたものが勝つ…と思いきや、実際は詳細度(Specificity)という“強さの点数”で勝敗が決まります。これを知らないと、「なぜか色が変わらない!」と何時間も溶かすことになります。
点数の数え方はシンプルで、セレクタに含まれる ID の数 / クラス・属性・擬似クラスの数 / 要素・擬似要素の数 を (a, b, c) として数えるだけ。a→b→c の順に大きいほうが強い。下の図1で各ルールをON/OFFして、どれが勝ってボタンが何色になるか試してください。
TARGET — このHTML要素を、下のルールたちが奪い合う
<a id="cta" class="btn primary" >
点数の意味:左=ID / 中=クラス・属性・擬似クラス / 右=要素・擬似要素
いまは全ルール有効。
#cta の (1,0,0) が最強で、ボタンはレッドになります。
図1 — 詳細度バトル:(a,b,c) が高いルールが勝つ。同点なら後に書いた方
IDは“けた違い”に強い
ポイントは、点数が「桁上がりしない」こと。(a,b,c) は普通の3桁の数ではなく、aがbより、bがcより常に優先される辞書式の比較です。だから #cta の (1,0,0) は、クラスを10個並べた (0,10,0) にすら勝ちます。「クラスをいくら足してもIDに勝てない」のはこのためです。
そして点数が完全に同じときだけ、最後の決め手として後に書かれたルールが勝ちます(図のブルーとオレンジはどちらも (0,1,0) で同点 → 後のオレンジが勝つ)。「順番が効く」のは同点のときだけ、というのが大事なところ。むやみに !important やIDで上書き合戦をすると、後で誰も手がつけられなくなります。
用語ミニ辞書
- 詳細度
- セレクタの強さ。(ID数, クラス等の数, 要素数) で表し、左から優先される。
- ソース順
- 詳細度が同点のときの最終決定。後に書かれたルールが勝つ。
- !important
- 詳細度を飛び越えて最優先する切り札。多用すると収拾がつかなくなる。
まとめ
「スタイルが効かない」の多くは、より詳細度の高いルールに負けているだけです。デベロッパーツールで打ち消されたルールを見つけ、勝っている相手の (a,b,c) を確認するのが最短の解決策。詳細度を無闇に上げず、できるだけ低く・フラットに保つことが、後から崩れにくいCSSのコツです。