詳細度
初級読み方：しょうさいど｜英語：Specificity
セレクタの優先順位を決める仕組みで、id > class > タグ名 の順に強いよ。
やさしい説明
詳細度（しょうさいど）とは、CSSセレクタの優先順位を決める「重み」の数値です。英語では Specificity（スペシフィシティ）と言います。
じゃんけんに例えると、IDセレクタはグー、クラスセレクタはチョキ、要素セレクタはパーのようなものです。IDが一番強く、要素が一番弱いです。
詳細度は「ID数 - クラス数 - 要素数」の3桁で計算します。数値が大きいセレクタのスタイルが優先されます。
図解：詳細度の重み
具体例・詳細度の計算
/* 詳細度: 0-0-1（要素1つ） */
p { color: black; }
/* 詳細度: 0-1-0（クラス1つ）→ 要素より強い */
.highlight { color: red; }
/* 詳細度: 0-1-1（クラス1つ + 要素1つ） */
p.highlight { color: blue; }
/* 詳細度: 1-0-0（ID1つ）→ 最強 */
#title { color: green; }
/* インラインスタイル → IDよりも強い */
/* <p style="color: orange"> → 1-0-0-0 */
/* !important → 全てに勝つ（最終手段） */
p { color: purple !important; }詳細度の強さ（強い順）
- !important — 全てのルールに勝つ。乱用禁止
- インラインスタイル —
style="color: red"など。詳細度: 1-0-0-0 - IDセレクタ —
#header。詳細度: 0-1-0-0 - クラス・属性・擬似クラス —
.btn、[type]、:hover。詳細度: 0-0-1-0 - 要素・擬似要素 —
p、div、::before。詳細度: 0-0-0-1 - 全称セレクタ（*）・結合子 — 詳細度に影響しない（0-0-0-0）
詳細度が同じ場合は、後から書いたスタイルが優先されます（カスケード）。これが「CSSを書いたのに効かない」原因の多くです。
いつ使う？
「CSSが効かない！」と思ったとき、原因の多くは詳細度です。開発者ツールの「Elements」タブで打ち消し線が引かれているスタイルを見つけたら、そのセレクタより詳細度が高いルールが上書きしています。
間違いやすいポイント
❌ IDセレクタでスタイルを書きすぎる
IDは詳細度が高すぎて、後からクラスで上書きしにくくなります。スタイルにはクラスセレクタを使うのが基本です。
❌ セレクタを長くしすぎる
div.container ul li a.link のような長いセレクタは詳細度が高くなりすぎて上書きが困難になります。シンプルなクラス名1つで書くのが基本です。
❌ !important を多用する
!important は詳細度の外にある最終手段です。乱用するとスタイルの上書きが不可能になりCSSが崩壊します。根本原因（詳細度の設計）を直すのが正しい対処法です。
よくある疑問
Q: スタイルが効かないときは？
A: 開発者ツールで打ち消し線が入っているスタイルを確認しましょう。より詳細度の高いセレクタに上書きされている可能性があります。
Q: 詳細度の計算方法は？
A: IDの数×100 + クラスの数×10 + 要素名の数×1 で計算します。例: #nav .link a は 100+10+1=111。.menu .link は 10+10=20。111の方が勝ちます。
Q: 詳細度を上げずにスタイルを効かせるには？
A: CSSの記述順を変える（後に書く）か、:where()セレクタを使うと詳細度0で書けます。!importantは最終手段です。
関連用語
📖 関連レッスン
レッスンを見る →