CSSの詳細度（優先順位）をわかりやすく解説

CSSが効かない原因、それは「詳細度」かもしれない

「CSSを書いたのにスタイルが反映されない」「!importantを使いすぎてぐちゃぐちゃになった」——CSS初心者がぶつかる壁の多くが詳細度（specificity）の問題です。

詳細度とは、ブラウザが「複数のスタイルが同じ要素に当たったとき、どれを優先するか」を決めるルールです。このルールを理解すれば、意図通りにスタイルを適用でき、!importantに頼らないきれいなCSSが書けるようになります。

この記事では、詳細度の計算方法を具体例で解説し、よくあるトラブルの解決方法を紹介します。

詳細度の計算方法：3桁ルール

詳細度は (ID数, クラス数, 要素数) の3桁の数値で表されます。左の桁が大きいほど強いです。

/* 詳細度の計算例 */
p                    /* (0, 0, 1) = 1点 */
.card                /* (0, 1, 0) = 10点 */
#header              /* (1, 0, 0) = 100点 */
p.card               /* (0, 1, 1) = 11点 */
#header .nav a       /* (1, 1, 1) = 111点 */
#header .nav a:hover /* (1, 2, 1) = 121点 ← :hoverはクラスと同じ10点 */

擬似クラス（:hover, :nth-child等）はクラスと同じ10点です。詳しくはCSS擬似クラス完全解説を参照してください。

カスケード（上書き）との違い

詳細度が同じ場合は、後に書いた方が勝ちます（カスケードルール）。

/* 両方とも詳細度 (0,1,0) → 後に書いた方が勝つ */
.text { color: blue; }
.text { color: red; }  /* ← こちらが適用される */

実践コード例①：クラスとIDが競合する場合

/* HTML: <p id="intro" class="text">テキスト</p> に対して */

/* 詳細度 (0, 1, 0) = 10点 */
.text {
  color: blue;
}

/* 詳細度 (1, 0, 0) = 100点 → こちらが勝つ */
#intro {
  color: red;
}

/* 結果: テキストは赤になる */

IDセレクターはクラスセレクターより常に強いです。クラスをいくつ重ねてもIDには勝てません。だからスタイリングにはIDではなくクラスを使うのが推奨されます。

実践コード例②：複数セレクタの詳細度計算

HTML: <nav class="nav"><a class="link">リンク</a></nav>

/* (0, 1, 1) = 11点 */
nav .link { color: blue; }

/* (0, 2, 0) = 20点 → こちらが勝つ */
.nav .link { color: green; }

/* (1, 0, 1) = 101点 → さらに強い（IDセレクター） */
#header a { color: red; }

実践コード例③：!importantなしで意図通りに上書きする

!importantを使わずに詳細度を上げるテクニックです。

/* ライブラリのCSS（変更できない） */
.btn.primary {
  background-color: blue; /* (0, 2, 0) = 20点 */
}

/* 自分のCSS: 詳細度を上げて上書き */
.my-theme .btn.primary {
  background-color: #0d9488; /* (0, 3, 0) = 30点 → 勝つ */
}

/* または、同じ詳細度で後に読み込む */
/* CSSファイルの読み込み順を変えるだけでOK */

親要素のクラスを追加するだけで詳細度を上げられます。CSSの管理方法についてはCSSカスタムプロパティ入門も参考にしてください。

!importantの位置づけと「なぜ避けるべきか」

.btn {
  color: red !important; /* 詳細度に関係なく最優先 */
}

/* !importantを上書きするには、さらに!importantが必要 */
#header .btn {
  color: blue !important; /* 詳細度が高い方の!importantが勝つ */
}

!importantを使うと、それを上書きするためにさらに!importantが必要になり、CSSが管理不能になります。使っていいのは以下のケースだけです。

• 外部ライブラリのスタイルをどうしても上書きしたいとき
• ユーティリティクラス（.hidden { display: none !important; }）

よくある間違い・注意点

❌ !importantの乱用で保守不能になる

!importantが増えると「どのスタイルが最終的に適用されるか」が予測できなくなります。まず詳細度の計算で解決できないか考えましょう。

❌ セレクタを深くネストしすぎる

/* NG: 詳細度が高すぎて上書きが困難 */
.page .container .content .card .title {
  color: red; /* (0, 5, 0) = 50点 */
}

/* OK: シンプルなクラスで管理 */
.card-title {
  color: red; /* (0, 1, 0) = 10点 */
}

同じ詳細度なら「後に書いた方が勝つ」

CSSファイルの読み込み順序も重要です。自分のCSSはライブラリのCSSより後に読み込みましょう。

ブラウザ対応状況

詳細度の計算ルールはすべてのブラウザで共通です。ブラウザによる違いはありません。

まとめ

詳細度の3桁ルールを覚えれば、CSSの上書き問題は解決できます。セレクタの種類を復習したい場合はCSSセレクターの使い方を確認してください。CSSの基礎全体はCSSとは？初心者向け解説で学べます。最初のスタイル適用から始めたい場合はCSSでWebページにスタイルを付ける方法を読んでみてください。

関連記事

• CSSセレクターの使い方 — セレクタの種類を復習
• CSSとは？初心者向け解説 — CSS全体の基礎に戻る
• CSSでWebページにスタイルを付ける方法 — 初めてのスタイル適用
• CSS擬似クラス完全解説 — 擬似クラスの詳細度への影響
• CSSカスタムプロパティ入門 — 管理しやすいCSS
• CSS練習問題 — 実践で詳細度を体感