CSS ・ CSSの記法
!important
詳細度に関係なく最優先にする（なるべく使わない）
値の後ろに付けると、セレクタの詳細度とは別の仕組みで、ほかの指定を強制的に上書きします。乱用するとCSSが管理できなくなるため、なるべく使いません。
01
サンプルコード
HTML
1<h1 class="title">見出しの色は？</h1>
CSS
1h1 {
2 color: #c0392b !important;
3}
4h1.title {
5 color: blue;
6}
7.title {
8 color: green;
9}
02
実行結果
ブラウザでの表示h1.title のほうが詳細度は高いですが、!important が付いた h1 の赤が優先されます
03
解説
!important は、プロパティの値の後ろ（; の前）に書きます。付けた指定は、セレクタの詳細度に関係なく最も優先されます。
上の例では、詳細度だけで比べれば h1.title（0-1-1）が一番強いので青になるはずですが、h1 の指定に !important が付いているため赤になります。
一度 !important を使うと、それを上書きするにはさらに !important が必要になります。これを繰り返すと、どの指定が効いているのか分からない、混乱したCSSになってしまいます。
上書きしたいときは、まずセレクタの書き方や書く順番を見直します。外部のライブラリやインラインスタイルをどうしても上書きできないときの、最終手段にとどめます。
04
応用例・注意点
優先される順番（強い順）
| 指定 | 説明 |
|---|---|
!important を付けた指定 | 最優先 |
インラインスタイル（style 属性） | 1-0-0-0 |
id セレクタ | 1-0-0 |
クラス・属性・疑似クラス | 0-1-0 |
要素・疑似要素 | 0-0-1 |
同じ強さどうし | 後に書いたほうが優先 |
!important を使わずに上書きする
詳細度を少しだけ上げるか、後に書くことで上書きします。
CSS
1/* × 強制的に上書き */
2.button {
3 color: white !important;
4}
5
6/* ○ クラスを1つ足して、後に書く */
7.header .button {
8 color: white;
9}
注意点
- 01!important は「詳細度で勝てないから付ける」ものではありません。付ける前に、なぜ上書きできないのかを開発者ツールで確認します。
- 02セミコロンの前に書きます。color: red; !important のように後ろに書くと効きません。