CSSの!importantについて解説【基本の使い方から上書き方法まで】

CSSの!importantがなぜか使えない…そんな場面に出くわすことはありませんか？
便利なため、よく使われる!importantですが、実は適切な使い方を知っておくことが重要です。

この記事では、!importantの基本から、上書きする方法までわかりやすく説明します。不必要に!importantを使いすぎることの弊害と、それを避けるためのヒントもご紹介。
!importantを正しく理解し、適切に使うことで、保守性の高いCSS設計ができますよ！

!importantは、CSSにおいて特定のスタイルを他のスタイルよりも優先して適用させたい場合に使用されます。

例えば、Webサイトの特定の部分に絶対に適用させたいスタイルがある場合や、複数のスタイルが競合しているときに優先して適用させたい場合に便利です。
ただし、使う場面はよく考えて使う必要があります。

CSSのセレクタには詳細度という基準があり、これがより高いスタイルが優先されるというルールがあります。詳細度について説明すると長くなってしまうので割愛しますが、例えば以下のようにpとp.colorでは後者の方が詳細度が高くなります。

!importantはこの詳細度のルールを無視して、最優先でスタイルを適用するということになります。

便利な!importantですが、ルールを無視できるので使いすぎるとCSSの管理が難しくなるのが難点…。特に大規模なプロジェクトや複数のスタイルシートが組み合わさっている時、!importantの乱用はスタイルの競合や管理の複雑化を招くことがあります。

なるべくは詳細度を高めることでスタイルの適用を管理し、必要な場合のみ!importantを使用するようにしましょう。

!importantは以下のように使います。
プロパティの値の後に空白を入れ!importantと記述します。

正しく記述すると、VS Codeなどを使用している場合は!important部分がハイライトされます。

実際にHTMLとCSSで見てみましょう。

See the Pen !important by web design shake (@webdesignshake) on CodePen.

この例では、pタグのテキストの色が red になります。
CSSは以下のようになっています。

p {
  color: red !important; /* この !important により、他のスタイルより優先される */
}

p.color {
  color: blue; /* こちらは適用されない */
}

この場合本来ならp.colorの方が詳細度が高いのでテキストの色がblueになるはずですが、!importantを使っているのでredが優先されるわけですね。
このように本来適用されない場合でも絶対にスタイルを適用できるのが!importantの特徴です。

!importantが効かない主な理由は、CSSの詳細度の競合にあります。

!importantが効かない一番多い理由は、他にも!importantが付与されている、より詳細度の高いセレクタがあるからと考えて良いでしょう。
その時、まずは!importantを使わないでそれぞれのスタイルを適用することができないかを検討しましょう。競合する相手の!importantを削除したうえで、効かせたいセレクタの詳細度を他セレクタより高めることで解決できます。

ただ、競合が起きている先のセレクタにやむを得ない事情があり、!importantを外せない場合もあると思います。そんな時は、以下の解決方法を試してみてください。

!importantが効かない問題の解決策の一つとして、!important同士で競合が起きているセレクタよりも詳細度を上げてスタイルを上書きする方法があります。CSSでは、より具体的なセレクタが優先されるため、セレクタの詳細度を高めることで!importantを上書きすることが可能です。

例えば、単純なクラスセレクタよりも、より多くのクラスや属性を含むセレクタを使用すると、そのスタイルの優先順位が高くなり、スタイルを上書きすることができます。
実際にHTMLとCSSで見てみましょう。

See the Pen !important2 by web design shake (@webdesignshake) on CodePen.

この例では、pタグのテキストの色が blue になります。
CSSは以下のようになっています。

p {
  color: red !important; /* 競合相手よりセレクタの詳細度が低いのでスタイルが優先されない */
}

p.color {
  color: blue !important; /* 競合相手より、セレクタの詳細度が高いのスタイルが優先される */
}

どちらも!importantがついており、競合しています。その上で、CSSの詳細度のルールに従い、pタグだけでなくp.colorとして指定している後者の方が詳細度が高くなり、適用されるということになります。
基本的にはセレクタの指定を増やすことで詳細度は高まっていきます。まずは、セレクタを細かく指定してみることにトライしてみてください。

もし解決できない場合は、他に考えられる要因を挙げてみました。以下を参考にチェックしてみてください。

適用したい要素に対して、誤ったセレクタを使用している可能性があります。
例えば、クラス名やID、要素の指定が間違っている場合、意図したスタイルは適用されません。
セレクタが正しく指定できているかを確認しましょう。

CSSの文法に誤りがある場合、スタイルは無視されます。
例えば、セミコロンの欠落や、プロパティ名、値の記述ミスが考えられます。!importantの記述の仕方も間違っていないか確認しましょう。

スタイルシートの読み込み順序が原因で、予期しないスタイルが適用されることがあります。後から読み込まれるスタイルシートの方が優先されます。
スタイルシートの読み込み順を確認しましょう。

ブラウザのキャッシュが原因で、更新したスタイルシートが反映されていない可能性もあります。キャッシュをクリアするか、プライベートブラウジングモードで確認すると良いでしょう。
スーパーリロードで読み込みなおすとよいでしょう。

いかがでしょうか。
!importantの基本から使い方とともに、使うべき場面やもし効かない場合の対処方法について解説しました。
改めて最後に強調したいのは、!importantは慎重に使ってください、ということです。!importantを使いすぎて、打ち消し合いが複雑に絡み合っているようなCSSにはしないように気を付けましょう。