概要
「なんでこのCSS当たらないんだ？」──
フロントエンド開発で最も多く聞かれるセリフの一つがこれだ。
実際、CSSが効かない原因の大半は「書き方」ではなく「優先順位」にある。
この“目に見えないルール”を正確に把握していなければ、スタイルは意図せず上書きされたり、反映されなかったりする。
本記事では、CSSのカスケード・セレクタの優先順位・!important の影響範囲を網羅的に解説し、
「なぜ効かないのか」ではなく「どう書けば確実に効くのか」を理解できる状態を目指す。
対象環境
CSS2.1 / CSS3 対応ブラウザ全般（Chrome / Firefox / Safari / Edge）
そもそもCSSはどうやってスタイルを決定しているか？
CSSには、複数のスタイルが同じ要素に競合したときに、どれを適用するかという厳密なルールがある。
このルールは以下の3段階で構成されている：
- 重要度（Origin）
- 優先順位（Specificity）
- カスケード（定義の順序）
1. 重要度（Origin）
- ユーザーエージェントスタイルシート（ブラウザ標準）
- 開発者スタイルシート（自分が書いたCSS）
- ユーザー定義スタイル（特別な設定）
-
!importantで強制されるスタイル（全てを上書き）
!important は最も強いが、乱用すると設計が崩壊するので注意。
2. 優先順位（Specificity：セレクタの強さ）
各セレクタは、以下の「スコア」に基づいて競合を判定される：
| セレクタ例 | スコア（A,B,C,D） | 意味 |
|---|---|---|
div |
0,0,0,1 | タグセレクタ |
.btn |
0,0,1,0 | クラスセレクタ |
#header |
0,1,0,0 | IDセレクタ |
button.btn.primary |
0,0,2,1 | クラス2つ + 要素1つ |
div#main .btn.active |
0,1,2,1 | ID1 + クラス2 + 要素1 |
style="color:red" |
1,0,0,0 | インラインスタイル（最も強い） |
- ID > class > element
- より強いスコアを持つスタイルが適用される
3. カスケード（定義の順序）
スコアが同じ場合は、後から書かれたスタイルが優先される。
.btn {
color: black; /* 無視される */
}
.btn {
color: red; /* 上書きされる */
}
!important の真価と危険性
.btn {
color: red !important;
}
-
!importantは優先順位・定義順序をすべて無視して強制的に適用される - ただし、より強いセレクタ +
!importantによって上書きされることはある
/* 上書きできる例 */
#main .btn {
color: blue !important;
}
❌ 乱用パターン
- スタイルが当たらないからとりあえず
!importantをつける - 後から他の場所でさらに
!importantを重ねる
→ 管理不能なスタイル競合地獄へ
実践Tips：特定セレクタを確実に勝たせたいとき
方法1：セレクタのスコアを高める
/* 弱い */
.button {
background: gray;
}
/* 強い（クラスを増やす） */
.page .form .button {
background: blue;
}
方法2：インラインスタイル（緊急性が高い場合）
<div style="color: red;">緊急スタイル</div>
方法3：設計でレイヤーを分ける（BEM/SMACSSなど）
命名規則やレイヤー設計を導入すれば、無理にセレクタを強くする必要がなくなる。
よくある疑問と回答
Q. style属性 が最強？
→ はい、インラインスタイルは基本的に全ての外部CSSより強いです。ただし !important 付きのIDセレクタには負ける場合があります。
Q. !important は一切使ってはいけないのか？
→ いいえ。どうしても強制が必要なケース（例：ライブラリ上書き）では有効。ただし局所的に限定して使うべきです。
Q. なぜBEMやUtility CSSが推奨されるのか？
→ 特定セレクタの強さに依存しなくても、スタイルが意図通りに適用されるから。構造で管理する時代へ。
結語
CSSが“効く”かどうかは、見た目の問題ではなく、ルールの競合に勝っているかどうかで決まる。
その勝敗を分けるのは「何をどう書いたか」──セレクタの設計力だ。
そして、!important を使わずに済む設計が、美しいCSSの基準である。
スタイルが乱れるのは、書き方ではなく設計の乱れ。
優先順位のルールを理解し、CSSと「戦う」のではなく「操る」側へ進もう。