どうしてもスタイルが効かない場合に優先適用させる「!important」の使い方

CSSの適用順序を無視して「今書いたこのスタイルシートを優先的に適用させたい！」と思う場合もあります。望ましい状況ではありませんが。(^_^;)
複数のCSSファイルを読み込む複雑な状況でスタイルシートを記述していると、自分が今書いたスタイルが(CSSでの適用優先順位の解釈に阻まれて)適用されないことがあります。(^_^;)
そんなときはスタイルに「!important」を加えることで、優先的にスタイルを適用させることができます。

とはいえ、それは最後の手段であって、まずはCSSの適用順序を確認しておきましょう。
基本的には「後で書いた方が有効」になる仕様ですが、class属性やid属性を使った場合には、その適用順序が覆されることもあります。

スタイルシートには適用順序(優先度)の計算ルールがある

スタイルシートを使って特定の箇所に何らかの装飾を施す方法には、いくつかの書き方があります。CSSソースが長くなれば、「同じ箇所に対して複数のスタイルが適用されている」という状況もよく現れます。その際、「どのスタイルを有効として適用するのか」が判断できないと困ります。なので、スタイルシートには以下のような適用順序の規則が設けられています。

• 基本的には、前よりも後に書かれたスタイルの方が採用される。
• 浅い階層よりは、深い階層を指定している方(＝セレクタの個数が多い方)が優先される。
• 要素名(タグ名)の指定よりも、class名の指定が優先される。
• class名だけの指定よりも、要素名にclass名を加えた指定の方が優先される。
• class名の指定よりも、id名の指定が優先される。
• id名だけの指定よりも、要素名にid名を加えた指定の方が優先される。

……のように説明すると、もはや何が何だか把握しにくくなってしまいます。
基本的にCSSは「後で書いたものが有効」になる仕様ではあるのですが、例えば「より深い階層を指定している方(＝セレクタの個数が多い方)が優先」とか、「class名が指定されている方がもっと優先」とか、「id名が指定されていたらもっともっと優先」とか、いろいろ優先順位の解釈が決まっています。
なので、読み込むCSSソースが長く(多く)なればなるほど、自分の意図しないスタイルが優先適用されてしまうケースによく遭遇します。

適用順序(優先度)を計算する点数

この複雑な優先順を把握する便利な考え方が、以下の1点・10点・100点の計算方法です。

• 要素名を1つ指定した場合： ＋1点
• class名を1つ指定した場合： ＋10点
• id名を1つ指定した場合： ＋100点

CSSのセレクタに指定した記述内容を、上記の規則で点数化します。ここで最も点数の高いスタイルが適用されるわけです。
例えば、以下のように計算できます。

div { /* 1点(＝要素名1つ) */ }
div p { /* 2点(＝要素名2つ) */ }
div p span { /* 3点(＝要素名3つ) */ }

.sample { /* 10点(＝class名1つ) */ }
div.sample { /* 11点(＝要素名1つ＋class名1つ) */ }
div.sample p { /* 12点(＝要素名2つ＋class名1つ) */ }
div.sample .yomple { /* 21点(＝要素名1つ＋class名2つ) */ }
div.sample p.yomple { /* 22点(＝要素名2つ＋class名2つ) */ }
div.sample p.yomple span { /* 23点(＝要素名3つ＋class名2つ) */ }

#priority { /* 100点(＝id名1つ) */
div#priority { /* 101点(＝要素名1つ＋id名1つ) */
div p#priority { /* 102点(＝要素名2つ＋id名1つ) */
div.sample p#priority { /* 112点(＝要素名2つ＋class名1つ＋id名1つ) */

もし、ある箇所に対して適用されるスタイルがバッティングした場合は、上記のルールで計算して、最も点数の高いスタイルが適用されます。
同じ点数だった場合は、後に記述された内容が使われます。

※なお、疑似要素は要素と同じ1点、疑似クラスはclassと同じ10点で計算します。

今書いたスタイルが意図通りに適用されない場合の最後の手段が「!important」

さて、ようやく本題です。
今書いたスタイルがどうしても適用されない、という場合があります。
その場合はもちろん、目的の箇所に適用されているCSSソースを調べて、何がどう(自分の意図に反して)適用された結果なのかを突き止めて解決するのが望ましいのですが、そんなことを言っていられない場合もあります。
例えば、

• とにかく時間が無くて、今すぐ解決したいとか、
• 問題のCSSソースは他人が書いたものなので触れないとか、
• 問題のCSSソースはフレームワークに含まれるものなので極力編集したくないとか、
• そもそも問題がどこにあるのか突き止められない(※)とか。(^_^;;;

そんなときに便利なのが、「今書いたこのスタイルを最優先しろ！」と指定できる「!important」です。
使いすぎると、CSSソースの解釈がさらに難しくなる上に、「!important」が指定されたスタイルをさらに上書きしたくなった際に困るので乱用は危険ですが……。^^;

※問題がどこにあるのか突き止められない場合は、例えば「セミコロン記号が抜けている」とか、記述ミスである可能性も結構あるので注意が必要です。(^_^;;;

スタイルを優先的に適用させる「!important」の書き方

スタイルを優先的に適用させる「!important」は、以下のような感じで記述します。

span {
   color: red !important;
}

上記のように、プロパティの値の末尾に !important と記述しておくと、そこで指定したスタイルが最優先で適用されるようになります。CSSの値のすぐ後に空白で区切って記述します。セミコロン記号より前に書く必要があるので注意して下さい。
上記の場合、同時に読み込まれている他のCSSファイル内などで(上記の記述よりも優先されるような書き方で)span要素に対して文字色が指定されていたとしても、ここに書いた値が最優先で適用されます。

「!important」の使用例(適用例)

例えば、以下のような単純な例を考えます。
HTMLソースで、p要素に「sample」というid名が振られています。

<p id="sample">優先適用のサンプルですよ。</p>

このとき、以下のようなCSSソースが読み込まれているとします。

p#sample { color: blue; }

当然、先のp要素の文字色は「青色(blue)」になりますよね。
ここで、以下のようなCSSをさらに記述したとします。

p { color: red; }

これによって、一見するとp要素の文字色は赤色(red)になりそうに思えますが、実はなりません。文字色は、青色のままです。
なぜなら、CSSのスタイル適用優先順の規則によって、「ただ要素名がセレクタに書かれているだけ」よりも、「id名が指定されている」方が優先されるからです。

しかーし！

ここで、伝家の宝刀「!important」を抜きます！

p { color: red !important; }

このように記述すると、他の場所にid名の指定があろうと何だろうと、ここに書いたスタイルが最優先されます。つまり、p要素は赤色で表示されます。

「!important」同士でバッティングした場合は元の優先順で適用される

上記のように便利な「!important」ですが、使いすぎると意味が無くなってきます。
例えば、先ほどの2つのスタイルに、両方とも「!important」が付いていた場合を考えます。

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

こうなっていると、<p id="sample">～</p>の文字色は「青色(blue)」になります。
まあ、そりゃそうですよね。
両方に「!important」が付加されていれば、より重視されるのは先程適用順序(優先度)を計算する点数でご紹介した計算式によって高い点数が出た方です。

なので、「!important」を使うとしても必要最小限に留めておき、できるだけ「!important」を使わずに済ませる方法を考えた方が良いと思います。^^;
ただ、期間が限定されていて今しか使わないウェブページだとか、単にサンプルとして提示する(本格活用するわけではない)ウェブページだとか、そういう場合には「!important」を活用して楽に済ませても良いのではないかと思います。

(更新日：2017年06月30日)