• HOME > 
  • CSS > 
  • CSSの!importantの使い方【優先順位を変更する方法...

CSSの!importantの使い方【優先順位を変更する方法】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

!importantとは?【意味と役割】

CSSには次のようなルールがあり、それに基づいて最終的に要素に適用されるスタイルが決定します。

  • 後から記述した値が適用される
  • 優先順位の高いセレクターの値が適用される

「!important」を使うと、これらのルールを無視して強制的に優先順位を最上位にして値を適用することができます。

「!important」はプロパティの値の後ろに半角スペースを空けて記述します。

importantの書き方

記述場所による優先順位について

CSSには後から記述したものが適用されるという決まりがあります。

下記の例では、p要素に対する文字色(color)の指定がの2つありますが、後から書いた青が適用されます。

HTML

<p>ダミーテキスト</p>

CSS

p{
    color:red;
    color:blue;
}

プレビュー

ダミーテキスト

ここで「!important」を「red」の方に付けてみましょう。本来の後優先のルールが無視され、文字色が赤になります。

CSS

p{
    color:red !important;
    color:blue;
}

プレビュー

ダミーテキスト

セレクターによる優先順位について

CSSのセレクターには優先順位が定められており、同じ要素に対して異なるセレクターで同じプロパティをした時には、記述の順番ではなく、最も優先順位が高いセレクターに記述した値が適用されます。

基本となる優先順位は次のようになっており、タグに指定したものよりクラスを使って指定したもの、クラスを使って指定したものよりIDを使って指定したものが優先的に反映されます。

優先順位
セレクターHTMLタグクラスid
記述の例p,div,h2など.sample#sample

次の例では、クラスとidを使ってそれぞれ異なる文字色を指定しています。クラスの方が後(下)に書かれていますが、セレクターの優先順位によりidで指定した値(緑)が適用されます。

HTML

<p id="test" class="sample">ダミーテキスト</p>

CSS

#test{
    color:green;
}
.sample{
    color:red;
}

プレビュー

ダミーテキスト

ここで「!important」をクラスの方に付けてみましょう。本来の後優先のルールが無視され、文字色が赤になります。

CSS

#test{
    color:green;
}
.sample{
    color:red !important;
}

プレビュー

ダミーテキスト
リンク先のサムネイル
CSSのセレクターの使い方

CSSのセレクタ―は、スタイルを適用させたいHTML要素の特定に使います。このページではセレクターの種類と使い方を解説します。セレクタ―を使ってスタイルを指定することで...【もっと読む】

!importantを解除(無効化)する方法

!importantは、コード上から記述を消す以外に解除や無効化する方法はありません。

!importantの記述を残したまま別の値を適用させたい場合は、別のセレクターを使って上書きさせるという方法になります。

!importantの上書き

!importantがついているもの同士の場合は、本来のセレクターの優先順位に基づいて値が適用されます。

つまり、値を上書きさせたいのであれば優先順位の高いセレクターに!importantを付ける必要があります。

先程の例で#testの方にも「!important」を付けると、本来の優先順位の基づいて「green」が適用されます。

CSS

#test{
    color:green !important;
}
.sample{
    color:red !important;
}

プレビュー

ダミーテキスト

!importantが非推奨とされる訳

!importantは正式に用意されている記述方法なので、使ったからといってペナルティが与えられる訳ではありません。

しかし、極力使わないようにすべきであるとされています。

「!important」はセレクターに関係なく強制的に優先順位を最上位にします。本来のセレクターのルールを乱してしまうため、後に上書きする必要が出た場合には再度!imortantを使わざるを得なくなります。

CSSのセレクターの優先順位を理解しないまま!importantに頼りすぎるとソースコードが!importantだらけになってしまいます。

本来の優先順位がわからなくなるので、現在どのセレクターが適用されているのか判断できず最終的には意図したスタイルを適用させることができなくなる恐れがあります。

便利さに甘えて安易に多用するのではなく、CSSのルールをしっかりと理解してセレクターの優先順位を使って意図したとおりにスタイルを適用できるようにしましょう。

まとめ

以上がCSSの!importantの使い方です。CSSを覚えたての時は便利さゆえについ使ってしまいがちですが、多用しているといつまでも本来のセレクターの使い方を理解できなくなってしまいます。まずは、セレクターの優先順位をしっかりとマスターし、ここぞという場面でのみ!importantを使うようにしましょう。

WordPressでテーマのカスタマイズを行いたいがテーマファイルの編集が難しいというような場合に、既存のスタイルを上書きするために使うこともあります。

広告
広告

関連する記事

サムネイル

CSSのセレクターで前方一致や部分一致を使って指定する方法

2024年05月16日
CSSでは属性の値を前方一致や部分一致でセレクターに指定できます。IDやクラス以外のhrefといった属性値であれば指定できるので、例えばリンク先ごとに処理を変えることも可能です。
サムネイル

CSSでテーブルの先頭行や先頭列を固定する方法【sticky……

2024年04月12日
CSSのpositionプロパティの「sticky」を使えば、CSSだけでテーブルの行も列も簡単に固定することができるのでご紹介します。情報量の多い表を作る場合は、スクロールした時に項目名などの行や列は固定させておいたほうが見やすくなります。
サムネイル

CSSのwhite-spaceプロパティの使い方【半角スペー……

2024年03月07日
SSのwhite-spaceは、テキストにおける半角スペース・改行・タブの扱いと折り返しの有無を設定するプロパティです。
サムネイル

CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【……

2023年10月01日
最終更新日:2023年09月28日
要素をタップしたときにホバー時のスタイルが適用され続けるという経験はありませんか?CSSだけで簡単にスマホでの疑似要素「hover」の挙動の対策を行う方法をご紹介します。
サムネイル

CSSの疑似クラス「:focus」の使い方【focus-wi……

2023年05月01日
最終更新日:2023年05月31日
CSSでは疑似クラスである「:focus」を用いることで、フォーカス時のスタイルを設定することが可能です。一方「:focus-within」は、その要素自体もしくは子要素にフォーカスがある状態で有効になります。
サムネイル

CSSのclamp()・max()・min()の使い方【プロ……

2023年01月16日
最終更新日:2023年03月10日
clamp()・max()・min()はCSSのプロパティの値の指定に利用できる比較関数です。複数の値を比較し1つの値を導きだし上限や下限を設定できます。
サムネイル

CSSのfont-feature-settingsの使い方【……

2023年01月16日
最終更新日:2023年03月10日
font-feature-settingsは、文字本来のサイズに応じてフォントの文字詰め(カーニング)を設定するためのプロパティです。