CSSの!importantの使い方をサンプルコード付き解説！

CSSではセレクタに対して、プロパティを使ってスタイルを定義していきます。例えばh1要素のテキストの色を赤にしたい場合は

のようにします。これでh1要素の文字色は赤になりますが、では別途h1要素にheadingというクラス名が付与されていて、

と文字色を青した場合は、h1要素の文字色に対して複数のスタイルが適用される形になります。もちろんどちらかしか適用されませんが、この時にスタイルの優先順位を考える必要が出てきます。

CSSのスタイルの優先順位は点数計算で計算され、下記のように点数を考え、合計点数が高いセレクタの指定が適用されます。
 

とはいえ、スタイルの優先順位を厳密に点数計算するのには時間がかかります。

時に手っ取り早く自らのスタイルを適用したいケースもあり、その場合は!importantを使うことで優先順位を無視した強制的なスタイルの適用が可能になります。

それでは早速!importantの使い方をサンプルコードで見てみましょう。

上記のサンプルコードでは!importantを使わない場合では.headingのセレクタのスタイル（文字色青）が適用されます。

しかし!importantを使うことで優先順位を無視して、h1のセレクタのスタイル（文字色赤）が最優先で適用されます。

もし!importantが上手く効かないという方は下記を参考にしましょう。

このように優先順位を無視できる!importantは一見便利に見えますが、デメリットも存在します。

次章で!importantのデメリットを紹介していきます。

!importantを使いすぎると、スタイルの指定で!importantだらけになったコードとなり本来のCSSのスタイルの優先順位の計算が複雑化します。

そのため、その場しのぎの!importantを多用していると、将来的にCSSのメンテナンスのコストが増える可能性があります。つまり保守がしにくくなります。

あくまで最終手段として!importantを利用するようにしましょう。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。