スタイルシート(CSS)の優先度を変更する

セレクタ { プロパティ:値 !important ; }

書き方

セレクタ { プロパティ:値 !important ; }

解説

スタイルシートをHTMLに読み込む方法に3種類あることはすでに説明しました。

以下の3つです。

  1. 各要素ごとに個別にスタイルシートを適用する方法
  2. HTMLファイルごとにスタイルシートを記述する方法
  3. 外部スタイルシートを読み込み、一括指定する方法

この3種類のスタイルシートの優先度は、上から順に高くなります。

従って、これらの方法で、セレクタに同じプロパティが設定されていた場合、優先度の高い方法の設定値が有効になります。

優先度を変える

以前に設定していたセレクタを、他の方法によって改めて記述し直した場合、これらの優先度によって内容が上書きされてしまうこともあります。

これを避けるため、どの方法よりも最優先したいプロパティがある場合、上記のように『!important』をプロパティの値の後ろに記述します。

このようにすると、どの方法でCSSを読み込んだとしても、!importantが書かれたプロパティの設定値が最優先されて適用されます。

CSS/HTMLサンプル

HTMLヘッダー
<style type=”text/css”>
<!–
body { background:#ffdff9 !important ; }
–>
</style>

HTML本文
<body style=”background:#eeeeee;”>

</body>

CSSの優先度を変える サンプル

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!