CSS詳細度（Specificity）の仕組みと計算方法
CSSの詳細度（Specificity）はスタイルの優先度を決める重要な概念です。複数のセレクターが同じ要素を対象としている場合、詳細度の高いルールが適用されます。デバッグ時に「なぜスタイルが効かないのか」を素早く特定するために欠かせない知識です。
詳細度 (a,b,c) の計算ルール
詳細度は (a,b,c) の3つの数値で表されます。a はIDセレクター（#id）の数、b はクラスセレクター（.class）・属性セレクター（[attr]）・擬似クラス（:hover）の合計数、c は要素型セレクター（div, p）・擬似要素（::before）の合計数です。比較は左から順に行われ、a が大きいほど優先度が高くなります。例えば `#nav .item:hover span` は (1,2,1) です。
特殊なセレクターの詳細度
全称セレクター `*` の詳細度は (0,0,0) でどんなセレクターにも負けます。`:where()` は引数の詳細度に関わらず常に (0,0,0) として扱われます（スタイルのリセットや再利用しやすいユーティリティに有効）。一方、`:is()` と `:not()` は引数リスト内で最も高い詳細度を持つセレクターの値を使います。例えば `:is(#id, .class)` の詳細度はIDセレクターを基準とした (1,0,0) になります。
!important と詳細度の関係
`!important` はセレクターの詳細度を変えるわけではなく、詳細度の計算から外れた特別な優先度レイヤーに引き上げます。!importantが競合した場合は通常通り詳細度の高いほうが勝ちます。乱用するとデバッグが困難になるため、サードパーティのスタイルを上書きする最終手段として限定的に使うのが望ましいです。
CSSデバッグでの活用
スタイルが期待通りに適用されない場合、まずブラウザのDevToolsでどのルールが上書きされているかを確認します。上書きされているルールは取り消し線で表示されます。次にセレクターの詳細度を比較し、より高い詳細度のルールが存在しないかチェックします。CSS Specificity Calculatorを使えば複数のセレクターを並べて優先度を即座に視覚化できます。