CSSでスタイルが効かない場合の最終手段「!important」の書き方を解説！

CSSでは同じ要素にスタイル指定が複数あり、重複している場合は優先順位を考える必要があります。優先順位は点数で計算ができ、上手くセレクタを指定することで思い通りにスタイルが適用できるはずです。

一方でその点数の計算を無視し、強制的にスタイルを適用させる方法としてあるのが「!important」です。

この!importantですが、どうしてもスタイルが適用されないときの救世主にもなりえますが、基本的には使わない方が良いとされています。

CSSの!importantは多様してしまうと、思わぬ事故につながります。!importantは点数の計算を無視して適用されるため、点数をしっかり計算しているプロジェクトに導入されると「あれ？なぜか点数通りにやってもCSSが反映されない。。」と言った事態になりえます。

「!important」は後々にCSSを書いていく際に問題になってくる可能性があり、つまり「メンテナンス性」を損なうというデメリットがあります。

更に自分の定義したスタイル上で!importantがあると、あとでbootstrapなどのデザインのライブラリを適用した際に、デザインが適用されないといった可能性も出てきいます。

このように!importantは何も考えず、自分のスタイルを短期的にはすぐに適用できますが、中期・長期で見たときに思わぬ落とし穴にはまる可能性があるものになります。

さて、CSSの!importantのデメリットを紹介してきましが、どうしてもすぐにスタイルを適用する必要があるときの手段としてぜひ書き方は覚えておきましょう。

!importantは下記のように記述していきます。

上記の例ではCSSの優先順位を考えると点数上は後者の.headingが勝っています。しかし前者のh1のセレクタのスタイルでは!importantが記述されており、最終的にはそちらが優先され、文字が赤く表示されています。

このようにCSSの!importantは下記のように記述します。

importantの前に!があるのと、;（セミコロン）の位置は文末ですので、その点だけ注意しましょう。

さてこの!importantですが、付けてもスタイルが効かないケースがあります。どういう場合でしょうか？

下記の例を見てみましょう。

前者のh1のセレクタで!importantがついていますが、最終的には後者の指定が適用されています。これは前者・後者両方で!importantが指定されているためです。

このように競合相手も!importantがついている場合は同条件で、この場合は優先度勝負になります。

この場合は素直に優先度を計算して対応しましょう。

その他!importantはスペルミスや、文法エラーに注意しましょう。初心者でこのようにミスは結構発生することがあります。

エディターの文法チェックの機能があれば、そこで見つけるか下記のサービスでも文法チェックが行なえますので、ぜひ利用してみましょう。