【CSS】!importantとは?使い方を解説【優先順位を理解しよう】

HTML/CSS プログラミング

「!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が適用されているのか分からなくなる

賢く使うポイント

  • マジでどうしようもない時に、最終手段として使う

上記2つのポイントさえ気をつけていれば、安全に使うことができます。

突然ですがここで問題です!

下記のようにCSSを書いた場合、結果はどうなるでしょうか?

<div class="test">
    これは文章です。
</div>
.test{
	color: red !important;
}
.test{
	color: blue !important;
}
.test{
	color: green !important;
}

答えは、、、
css-important-image1

文字色はグリーン(みどり色)でした〜。

これは簡単な例でしたが、実際の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;
}

css-important-image3
あとから書いたほうが優先されるのです。

まとめ:!importantの使い方

この記事のポイントをまとめておきます。

  • !importantをつければ最優先でスタイルを適用できる
  • むやみに使うと、どのCSSが適用されているのか分からなくなる
  • どうしようもないときの最終手段として使う
  • なるべくCSSのカスケードと優先順位を意識してコードを書こう