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

|

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

1.個別性による優先順位

  • 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 */

2.記述順序による優先順位

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

例えば、

CSSコード

p {color:red;}

p {color:blue;}

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

3.!important宣言により最優先に

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

CSSコード

p {color:red !important;}

p {color:blue;}

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

4.CSSの指定場所による優先順位

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

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

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

5.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を記述していかなければなりません。どのように指定すれば、思い通りにスタイルが適用されるかは別のコラムにて紹介します。

このページに関連する記事

最近のブログ記事