セレクタの記述方法による優先度

スタイルシートの種別や「!important」による優先度が違うことについては既に記述しましたが、優先度の最後にセレクタの記述の仕方のよる優先度の違いについて確認します。

まずまったく同じセレクタに対して同じプロパティに値を設定した場合は、最後に記述した値が有効となります。

<style type="text/css">
p {
  color: #00ff00;
}

p {
  color: #ff0000;
}
</style>

上記であればp要素のcolorプロパティの値は「#ff0000」となります。

では次のように記述した場合はどうなるでしょうか。

<style type="text/css">
p#sample {
  color: #00ff00;
}

p {
  color: #ff0000;
}
</style>

<body>
<p id="sample">
  ....
</p>
</body>

対象となるp要素にはid属性が設定されています。スタイルシートではIDセレクタと属性セレクタによって同じプロパティに対して異なる値が記述されていますが、今回はp要素のcolorプロパティの値は「#00ff00」となります。これはセレクタの記述方法によってスタイルが適用される優先度が異なるためです。

優先度の判定はセレクタ毎に定まるspecificity(特異性、固有性)を計算し、その値をそれぞれ比較し優先度を決めます。

セレクタのspecificity(特異性、固有性)の計算

セレクタ毎の優先度に関する考え方については次のURLに計算方法が掲載されています。

Assigning property values, Cascading, and Inheritance
http://www.w3.org/TR/CSS21/cascade.html

該当箇所を引用いたします。

6.4.3 Calculating a selector's specificity

A selector's specificity is calculated as follows:
・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)

簡単に書くと次のようなことが書かれています。

・特異性は a, b, c, d という並びで形成される数値で表される。基本の
  値は全て0(よって 0, 0, 0, 0)
・style属性に値が設定されている時は「a」を1に設定
・ID属性が含まれている場合は「b」を1加算
・ID属性以外の属性が含まれている場合は「c」を属性の数だけ加算。
  また擬似クラスが含まれている場合も「c」を擬似クラスの数だけ加算。
・要素が含まれている場合は「d」を要素の数だけ加算。また擬似要素が
  含まれている要素の数だけ

いくつかの例で実際に計算してみます。

セレクタ	計算	specificity
style="color: #ff0000"	style属性	1, 0, 0, 0
p#sample	ID属性が1つと要素が1つ	0, 1, 0, 1
#sample	ID属性が1つ	0, 1, 0, 0
div p.sample	要素が2つと属性が1つ	0, 0, 1, 2
p.sample	属性が1つ	0, 0, 1, 0
p em	要素が2つ	0, 0, 0, 2
p	要素が1つ	0, 0, 0, 1
*	--	0, 0, 0, 0

セレクタ毎にこのような計算が行われ、結果的に数値が高いものが優先度が高いセレクタとなります。数値が高いかどうかはまず「a」の数値が比較し同じ場合に次の「b」の数値を比較します。同じように「c」の値や「d」の値を比較します。4桁の数値と考えて頂いてもいいのですが、「c」の値は場合などは場合によっては10以上となることもあるので厳密には4桁の数値ではなく4つ並んだ数値となります。

style属性に値が設定されていれば最も優先度が高くなり、次にID属性によって特定されている場合が高くなります。ただID属性の記述方法でも多少違いが出てくるので注意が必要です。例えば「#sample」と「要素#sample」と「要素[id="sample"]」では対象となる要素は同じですがspecificityの値は違います。

なおこのページの一番最初のサンプルのように、まったく同じ記述の仕方をして設定する値だけが異なる場合はspecificityの値は同じになります。このようなspecificityの値が同じ場合は後から記述したものが有効となります。

注意する点は、同じ要素を対象とした複数のセレクタがあり優先度が異なっていたとしても、もっとも優先度の高いセレクタに記述されたスタイルだけが有効になるわけではないということです。同じプロパティに対し複数のセレクタで異なる設定をしていた場合は優先度によってどの値がを適用するのかを決定しますが、他のセレクタで記述されていないプロパティに対するスタイルは優先度に関係なく複数のセレクタを使って記述されたスタイルが全て適用されます。

サンプル

では簡単なサンプルで試してみます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <title>CSSの書式</title>
    <style type="text/css">
    #sample {
      color: #0000ff;
      background-color: #fffacd;
    }

    p#sample {
      color: #006400;
    }

    p {
      color: #ff0000;
      font-style: italic;
    }
    </style>
  </head>

  <body>

    <p id="sample">
    今年は第二回のワールド・ベースボール・クラシック(WBC)が開催されます。
    監督選考の件で日本でもごたごたとしていましたが第一回は優勝でしたので
    今回もいい結果を出して欲しいものです。
    </p>

  </body>
</html>

実際にブラウザで見てみると下記のようになります。

セレクタの記述方法による優先度

今回同じp要素を対象として3つの異なるセレクタを使ってスタイルを設定しています。同じプロパティに対する値は優先度が最も高いセレクタで設定された値が有効となりますが、他のセレクタと競合していないプロパティに対しては各セレクタで設定した値がそれぞれ適用されて有効となっていることが確認できます。

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

初心者～中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。