CSS詳細度の解説 - カスケードの仕組み

CSS詳細度の理解

詳細度は、複数のルールが同じ要素をターゲットにした場合にどのCSS宣言が適用されるかをブラウザが決定するために使用するアルゴリズムです。CSSカスケードの3本柱の1つです（重要度とソース順序と並んで）。

詳細度タプル

詳細度は3部構成のタプルとして計算されます：(a, b, c)

コンポーネント	カウント対象	例
a (ID)	IDセレクター	#header、#nav
b (クラス)	クラス、属性、擬似クラス	.btn、[type]、:hover
c (要素)	タイプセレクター、擬似要素	div、p、::before

比較ルール

詳細度は左から右に比較されます：

(1, 0, 0) > (0, 99, 99)  — 1つのIDは任意の数のクラスに勝つ
(0, 1, 0) > (0, 0, 99)   — 1つのクラスは任意の数の要素に勝つ
(0, 2, 0) > (0, 1, 5)    — クラスが多い方が勝つ

例

*                    → (0, 0, 0)
p                    → (0, 0, 1)
p.intro              → (0, 1, 1)
p.intro.highlight    → (0, 2, 1)
#header              → (1, 0, 0)
#header .nav li      → (1, 1, 1)
#header .nav li.active → (1, 2, 1)

特殊なケース

• *（ユニバーサル） — 詳細度ゼロ
• :where() — 詳細度ゼロ（デフォルトに最適）
• :is() / :not() / :has() — 最も具体的な引数の詳細度
• インラインスタイル — すべてのセレクターベースの詳細度をオーバーライド
• !important — すべてをオーバーライド（インラインスタイルを含む）

詳細度の管理

1. 主にクラスを使用 — 一貫した詳細度 (0, 1, 0)
2. スタイリングにIDを避ける — 高い詳細度がエスカレーションを引き起こす
3. リセット/デフォルトスタイルに:where()を使用 — 詳細度ゼロ、オーバーライドが簡単
4. CSSレイヤー（@layer）を使用 — 詳細度とは独立してカスケード順序を制御
5. 手法に従う — BEM、ITCSS、またはユーティリティファーストで詳細度の戦争を防止