CSSの「!important」とは？正しい使い方と注意点を初心者向けに解説

2024年7月30日2024年8月26日

misa

こんにちは、ウェブデザインパレットのmisaです。

「CSSのスタイルが思ったように効かない・・・。」そんな経験はありませんか？
それは、CSSのルールである「セレクタの優先順位」が影響しているかもしれません。

それでも、どうしても適用したいスタイルがある場合には、「!important」という特別な命令を使うことができます。
!importantを使うと、セレクタの優先順位を無視して、強制的にスタイルを適用することができます。

今回は、!importantの正しい使い方と注意点を初心者向けに解説していきます。

Contents

なぜ「!important」が必要なの？

CSSでスタイルを定義する際、複数のスタイルシートや同じスタイルシート内の複数のセレクタが同じ要素にスタイルを適用しようとする場合があります。
このような場合、CSSには優先順位が定められており、優先順位の高いスタイルが適用されます。

しかし、意図したスタイルが優先されない、という状況に遭遇することもあります。
例えば、テーマやプラグインが提供するデフォルトのスタイルを上書きしたい場合などです。

このような時に登場するのが「!important」です。

misa

CSSの優先度についてはこちらの記事で解説しています👇

!importantは、CSSの宣言に付加するキーワードで、このキーワードが付加されたスタイルは、他のどのスタイルよりも優先して適用されることを意味します。

つまり、!importantが付加されたスタイルは、通常の優先順位を無視して、強制的に適用されるのです。

!importantを使う方法はとても簡単です。
優先させたいスタイルの値の後に、半角スペースを空けて「!important」と書くだけです。

HTML

<p class="text">「!important」の使い方</p>

CSS

/* !importantを使ったスタイル */
p {
  color: red !important;
}

/* 通常のスタイル */
p.text {
  color: blue;
}

「!important」の使い方

上記の例では、pタグに対して2つのスタイルが定義されています。
通常は後に書いたcolor: blue;が適用されます。
しかし、「!important」が付加されたcolor: red !important;が優先され、最終的にpタグの文字色は赤になります。

!importantは、以下のようなケースで使用することを検討できます。

!importantはとても強力なツールですが、乱用するとCSSの保守性が著しく低下するというデメリットがあります。

必要以上に使用するのは避ける：!importantを多用すると、どのスタイルが最終的に適用されているのかを把握するのが難しくなります。!importantはどうしても優先したいスタイルのみに絞って使うようにしましょう。
メンテナンス性の低下：将来的にスタイルを変更したい場合、!importantが原因で意図した変更ができない可能性があります。特に大きなプロジェクトでは、!importantの使用は最小限に留めましょう。

!importantを使う前に、セレクタの優先順位を上げる方法を検討してみましょう。

CSSの優先順位を理解する：CSSの優先順位を理解し、適切なセレクタを使用することで、!importantを使わずに意図したスタイルを適用できる場合があります。
より具体的なセレクタを使用する： ID属性やインラインスタイルなど、より具体的なセレクタを使用することで、意図したスタイルを適用できます。
擬似クラスを活用する：:has()や:not()を使用することで、詳細度を上げることができます。