CSSの優先順位（詳細度）の仕組み

同じ要素に対して複数のスタイルが指定されたとき、ブラウザは「点数（詳細度）」を計算し、最も点数が高いものを採用します。

1. 優先順位のランキング（点数表）

上にあるものほど優先されます。

優先度指定方法具体例
最強 !important color: red !important;
高 インラインスタイル <p style="color: blue;">
中 IDセレクタ #main-title { ... }
低 クラス / 属性 / 擬似クラス .button { ... } / :hover
最低 要素（タグ名） / 擬似要素 p { ... } / h1 { ... }

2. 「後から書いたもの」が勝つルール

優先度（点数）が全く同じ場合は、スタイルシートの下の方に書いた記述が上書きして適用されます。

.text { color: blue; }
.text { color: red; } /* 同じクラス名なら、後にある「赤」が採用される */

3. 詳細度の計算（重ね着のルール）

セレクタを細かく指定するほど点数が高くなります。

1
p （要素のみ：1点）
2
.container p （クラス1つ + 要素1つ：11点）
3
.container .main p （クラス2つ + 要素1つ：21点）

→ 3番目の指定が一番具体的（詳細）なので、最も優先されます。

4. 禁断の最終兵器 !important

どんな優先順位も無視して強制的に適用させるのが !important です。

.text { color: green !important; }

多用は厳禁！

これを使うと後から修正するのが非常に困難になります。CSS設計（BEMなど）をしっかり行い、点数計算で解決するのがプロのやり方です。

まとめ：スタイルが効かない時のチェックリスト

  1. スペルミスやセミコロン（;）忘れはないか？
  2. より強いセレクタ（IDやインライン）に邪魔されていないか？
  3. 読み込み順序で、後に書いた別の指定に上書きされていないか？
  4. !important がどこかで暴走していないか？