詳細度
初級読み方：しょうさいど｜英語：Specificity
セレクタの優先順位を決める仕組みで、id > class > タグ名 の順に強いよ。いつ使う？ 「CSSを書いたのに効かない！」というとき、詳細度を理解していると原因がわかるよ。開発者ツールで打ち消し線が入っているスタイルは、より詳細度の高いセレクタに負けているよ。間違いやすいポイント: IDセレクタ(#id)はクラスセレクタ(.class)より圧倒的に強いから、IDでスタイルを書くと後から上書きしにくくなるよ。基本はクラスだけでスタイリングしよう。
やさしい説明
詳細度（しょうさいど）とは、CSSセレクタの優先順位を決める「重み」の数値です。英語では Specificity（スペシフィシティ）と言います。
じゃんけんに例えると、IDセレクタはグー、クラスセレクタはチョキ、要素セレクタはパーのようなものです。IDが一番強く、要素が一番弱いです。
詳細度は「ID数 - クラス数 - 要素数」の3桁で計算します。数値が大きいセレクタのスタイルが優先されます。
図解：詳細度の重み
具体例・使い方
/* 詳細度: 0-0-1（要素1つ） */
p { color: black; }
/* 詳細度: 0-1-0（クラス1つ）→ pより強い */
.highlight { color: red; }
/* 詳細度: 0-1-1（クラス1つ + 要素1つ） */
p.highlight { color: blue; }
/* 詳細度: 1-0-0（ID1つ）→ 最強 */
#title { color: green; }いつ使う？
「CSSが効かない！」と思ったとき、原因の多くは詳細度です。開発者ツールで打ち消し線が引かれているスタイルを見つけたら、詳細度を確認しましょう。
間違いやすいポイント
❌ IDセレクタでスタイルを書きすぎる
IDは詳細度が高すぎて、後から上書きしにくくなります。スタイルにはクラスセレクタを使うのが基本です。
❌ セレクタを長くしすぎる
div.container ul li a.link のように長いセレクタは詳細度が高くなりすぎます。シンプルなクラス名で書きましょう。
よくある疑問
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は最終手段です。
関連用語
📖 関連レッスン
レッスンを見る →