【CSS】!importantとは？使い方を解説【優先順位を理解しよう】
「!importantってどんな効果があるの？」
「なぜかCSSが適用されない。どうしよう…」
この記事ではこのような質問に答えていきます。
「!important」の使い方自体はとっても簡単ですが、使い所は注意しないといけません。シンプルに解説していくので安心してくださいね。
ではさっそく見ていきましょう。
【CSS】!important（インポータント）とは？使い方を解説
!important（インポータント）とは？
!importantとは、どんなときでも最優先でスタイルを適用できる、いわばCSSにおいて最強の権力を持った存在です。
たとえば下記のようにCSSを書いたとしましょう。
p{color: red !important;}
p{color: blue;}すると、!importantがついたプロパティを最優先で適用してくれるのです。上記の場合、p要素の文字色は赤色になります。
!importantをつければ最優先でスタイルを適用できる。これだけ覚えておけばOKです。
!importantの使い方
!importantの使い方はとっても簡単です。下記のように書いてあげましょう。
p{color: red !important;}値のうしろに半角スペースを入れて、!importantと書いて、最後に;で閉じてあげます。
これだけです。とっても簡単ですね。
「!」ビックリマークをつけるのも忘れないでくださいね。
!importantを使うときに注意したいポイント
注意ポイント
- むやみに使うと、どのCSSが適用されているのか分からなくなる
賢く使うポイント
- マジでどうしようもない時に、最終手段として使う
上記２つのポイントさえ気をつけていれば、安全に使うことができます。
突然ですがここで問題です！
下記のようにCSSを書いた場合、結果はどうなるでしょうか？
<div class="test">
これは文章です。
</div>.test{
color: red !important;
}
.test{
color: blue !important;
}
.test{
color: green !important;
}答えは、、、
文字色はグリーン（みどり色）でした〜。
これは簡単な例でしたが、実際のWebページはもっと複雑なので、!importantを乱用すると大変な状況になるのは、火を見るより明らかですね。
もちろん使ってはいけないというわけではないのですが、なるべく使わないようにコードを書くのがいいですね。
!importantを使うシチュエーション
たとえば下記のとおり
- どうしてもスタイルが効かない場合
- とにかく時間がなくて、いますぐに解決したい時
- 他人の書いたコードをいじりたくないとき
- バグがBootstrapなどのフレームワークに含まれている時
このようなときに便利なのがスタイルを最優先できる「!important」なのです。
「マジで時間がないのに、どこが間違ってるか全然分からない」って時なんかには効果は抜群ですね。
【補足情報】CSSのカスケードと優先順位を意識してコードを書こう！
カスケードというのは、連鎖的または段階的に連なっていく様子のことです。CSSでは上から下という目には見えませんが、CSS独自の流れがあるのです。
※CSS初心者の方はいまいちピンとこないかもしれませんが、書き続けているとそのうちわかってきます。
この流れはスタイルシートの優先順位にも関係してきます。
スタイルシートの優先順位については下記の2つ
- セレクタによる優先順位
- 同じセレクタなら、あとに書いた方が優先
順番に見ていきます。
セレクタによる優先順位
セレクタごとの優先順位は強い順から下記のとおり。
| 強い順 | セレクタ | 例 |
| １ | id | #exampleなど |
| ２ | class | .exampleなど |
| ３ | 疑似クラス | .example:hoverなど |
| ４ | 疑似要素 | .example::beforeなど |
| ５ | タイプセレクタ | div、p、aなどのタグ |
| ６ | 全称セレクタ | *「アスタリスク」のこと |
上記の順番で、適用されるスタイルが決まっていきます。
たとえば下記のような場合は文字の色が赤になります。
#example{
color: red;
}
.example{
color: blue;
}
div{
color: green;
}
セレクタによって優先順位が決まるのです。
同じセレクタなら、あとに書いた方が優先
セレクタが同じなら、書く順番で優先度が決まってきます。
たとえば下記のようなコードを書いたら、文字の色は青になります。
.example{
color: red;
}
.example{
color: green;
}
.example{
color: blue;
}
あとから書いたほうが優先されるのです。
まとめ：!importantの使い方
この記事のポイントをまとめておきます。
- !importantをつければ最優先でスタイルを適用できる
- むやみに使うと、どのCSSが適用されているのか分からなくなる
- どうしようもないときの最終手段として使う
- なるべくCSSのカスケードと優先順位を意識してコードを書こう
ペット保険ペット保険の資料一括請求サービス
キャットフード愛猫にスッキリ快適な毎日を過ごしてほしいあなたへ『モグニャン』