CSSの詳細度に負ける理由｜スタイルが反映されない時の調査法
こんにちは！
今日は「CSSの詳細度に負ける理由｜スタイルが反映されない時の調査法」についてお話しします。
詳細度って何？僕が最初につまずいた話
僕も新人の頃、ほんまにこれで悩みました。
せっかくbuttonのスタイルを書いたのに、なぜか反映されない。
もう一度書いても、何度書いてもダメ。
その時は「CSSって予測不可能だな」って思ってました。
でも実は、CSSはちゃんと順番を守ってるんです。
その順番が「詳細度」という考え方です。
簡単に言うと、詳細度は「どれだけ具体的なセレクタか」を数値化したもの。
詳細度が高い（より具体的な）ルールが、詳細度が低いルールを上書きします。
詳細度のルールは以下の通りです：
- インラインスタイル（
style=""）：最強 1000点 - IDセレクタ（
#header）：100点 - クラスセレクタ（
.button）、属性セレクタ（[type="text"]）、疑似クラス（:hover）：10点 - 要素セレクタ（
button、p）：1点
たとえば、.buttonで書いたスタイルは、buttonだけで書いたスタイルより強いんです。
なぜなら10点 vs 1点だから。
現場あるあるな詳細度バトル3パターン
パターン1：クラスセレクタに負ける要素セレクタ
これ、めっちゃよく見かけます。
例えば、あなたがbutton要素に赤色を付けたいとします：
button { color: red; }
でも、他の誰かがグローバルスタイルで既に書いてます：
.primary-btn { color: blue; }
そして、HTMLはこう：
<button class="primary-btn">ボタン</button>
あなたのbuttonスタイルは1点。
相手の.primary-btnは10点。
結果：ボタンは青になります。
あなたのスタイルは負けるんです。
パターン2：IDセレクタの絶対的力
IDセレクタを見つけたら、もうそれに勝つのは難しい。
（正当な理由がない限り）
例えば：
#submit-btn { background: green; }
.button { background: yellow; }
どちらが勝つか？
IDの100点が、クラスの10点を圧倒します。
僕が現場で見た失敗は、新人が一生懸命.buttonのスタイルを調整しても、既存の#submit-btnに負けてることに気づかないパターン。
開発者ツールで確認するまで「なぜ変わらないの？」状態でした。
パターン3：セレクタの連鎖で詳細度がアップ
ここがトリッキーです。
セレクタを組み合わせると、詳細度も合算されます。
例：.container .button { color: red; }
これは「クラス」が2個だから、10 + 10 = 20点。
.button { color: blue; }
これは10点なので、上のルールが勝ちます。
さらに複雑に：
div.container button.primary { color: red; }
これは1 + 10 + 1 + 10 = 22点。
もう「どっちが強いのか」がパッと見では分かりませんよね。
これが詳細度トラブルが起きやすい理由です。
詳細度を上手に調査する方法
方法1：開発者ツールを信頼する
Chrome、Firefox、Safari、どのブラウザにも開発者ツール（DevTools）があります。
ここが最強の調査ツールです。
要素を右クリック→「検査」（またはInspect）で、該当要素を開く。
すると、右側に「Styles」パネルが出ます。
ここで、あなたのスタイルが「打ち消し線」で表示されてたら、それはより詳細度の高いルールに負けてるということ。
上から順に見ていくと、どのセレクタが勝ってるのか分かります。
方法2：詳細度計算サイトを使う
「CSS Specificity Calculator」というオンラインツールがあります。
セレクタをコピペするだけで、詳細度を数値化してくれます。
現場では、先輩とコードレビューする時に「このセレクタと、あのセレクタどっちが強い？」って話になることがあります。
そういう時にサッと計算できるので便利ですよ。
方法3：優しい解決策：クラスセレクタを統一する
詳細度トラブルを最初から避けるコツは「セレクタの書き方を統一する」ことです。
僕がいる現場では、こんなルールを決めてます：
- IDセレクタは原則使わない（JavaScript用のIDはあり）
- スタイリングはクラスセレクタだけ
- セレクタの連鎖は2階層まで
こうすると、詳細度が予測可能になるんです。
「全部クラスだから、後に書いた方が勝つ」という単純ルールになる。
初心者こそ、この「シンプルに統一する」が大事です。
方法4：最終手段は!important？
「!importantを使ったら解決する」って聞いたことありますか？
color: red !important;
これは詳細度を無視して、その値を最強にします。
確かに動きます。
でも、僕は現場ではほぼ使いません。
理由は、後から誰かが!importantで上書きしたくなるから。
そしたらもっと複雑になる。
「詳細度の問題は!importantで解決」じゃなくて、「セレクタの書き方を見直して解決」するのが健全です。
まとめ
CSSの詳細度は、最初は「謎のルール」に見えるかもしれません。
でも、詳細度を理解すると、なぜスタイルが反映されないのかが分かるようになります。
大事なポイント：
- 詳