スタイル適用の優先順位を理解する

valid（正当）なCSSで記述しても、スタイルが反映されていないときがあります。実はCSSには優先順位が以下のようにあります。

１．個別性による優先順位

• count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
• count the number of ID attributes in the selector (= b)
• count the number of other attributes and pseudo-classes in the selector (= c)
• count the number of element names and pseudo-elements in the selector (= d)

Assigning property values, Cascading, and Inheritanceより引用

英語なのでわかりにくいかと思いますが、日本語に意訳すると以下のような意味となります。

• スタイル属性が指定されていたらa=1、b=0、c=0、d=0とします。
• セレクタに含まれているid属性の数をbにカウントします。
• セレクタに含まれているid以外の属性と擬似クラスの数をcにカウントします。
• セレクタに含まれている要素と擬似要素の数をdにカウントします。

そして、a-b-c-dと数字を並べて、数字が大きいほど優先度が高くなります。

サンプルは以下のとおりです。

 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */

 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */

 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */

 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */

 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */

 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */

 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */

 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */

 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */

 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

２．記述順序による優先順位

CSSファイルの下に記述したほど、優先度が高くなります。

例えば、

CSSコード

p {color:red;}

p {color:blue;}

という記述があるとするなら、pタグで囲まれた文字は"青"になります。

３．!important宣言により最優先に

また、｢!important宣言｣というものがあり、プロパティの後ろに｢!important｣をつけることにより、そのスタイルが最優先されます。

CSSコード

p {color:red !important;}

p {color:blue;}

上記の場合、pタグで囲まれた文字は"赤"になります。

４．CSSの指定場所による優先順位

さらに、CSSを記述している箇所によっても優先順位が異なります。例えば、CSSは(X)HTMLファイル内に記述することもできますし、(X)HTMLファイルとは別の外部ファイルに記述することもできます。

これらの優先順位は以下のとおりです。

1. HTMLタグに直接スタイル属性を設定
2. (X)HTMLファイルのheadにスタイル要素を設定
3. 外部スタイルシート

５．CSSの提供元による優先順位

以上の話は、Webページを作成する際の話ですが、CSSの提供元によってCSSが適用される順位が異なります。

どういうことかというと、CSSを指定するのはWebページをコーディングしているときだけと思いがちですが、Webページを閲覧しているユーザでもFirefoxなど特定のブラウザの機能により自由にCSSを上書きすることができます。

また、あらかじめ、ブラウザが初期値としてCSSを指定しています。例えば、h1タグは文字が大きいとかstrongタグはテキストが太くなる（ボールドになる）とかは、ブラウザにあらかじめ設定されているCSSによるものです。

これらの優先順位は以下のとおりです。

1. 製作者スタイルシート（Webページ製作者による）
2. ユーザスタイルシート（Webページ閲覧者による）
3. ブラウザのデフォルトスタイルシート

ただし、!important宣言を使用すればユーザスタイルシートが優先されます。

結局のところ、どのようなスタイルの優先順位になるかというと、

1. 個別性の高いものが優先され、
2. 同じレベルの個別性である場合、!importantが最優先、あとはHTMLファイルを上から読んでいった際に、最後に読み込んだ（上書きされた）スタイルが適用されます。

以上のように非常に複雑ですのでむやみやたらにCSSを指定せず、自分で決めたルールに則ってCSSを記述していかなければなりません。どのように指定すれば、思い通りにスタイルが適用されるかは別のコラムにて紹介します。