reflux flow > CSSにおけるセレクタの優先順位

CSSにおけるセレクタの優先順位

セレクタの優先順位を決める詳細度の計算方法。

このページの目次
  1. はじめに
  2. セレクタの種類
  3. 優先順位の計算方法
  4. ブラウザの実装
  5. 参考文献
公開日
2006-08-23
最終更新日
2007-05-21T19:21:52+09:00

はじめに

ここではCSS2の仕様を元にセレクタの優先順位を決める詳細度（specificity）の計算方法について説明します。

セレクタの種類

まずは用語の確認（参考: 5 Selectors）。

全称セレクタ
すべての要素に適合するセレクタ。「*」と記述する。
IDセレクタ
id属性（HTML/XHTMLの場合）に基づくセレクタ。「#ID」と記述する。
クラスセレクタ
class属性に基づくセレクタ。「.クラス名」と記述する。属性セレクタを用いた「[class~=クラス名]」と意味は同じ。
属性セレクタ
属性および属性値に基づくセレクタ。「[属性名]」、「[属性名=属性値]」、「[属性名~=属性値]」、「[属性名|=属性値]」のように記述する。
疑似クラス
「:first-child」、「:link」、「:visited」、「:hover」、「:active」、「:focus」、「:lang」と記述されるもの。
疑似要素
「:first-line」、「:first-letter」、「:before」、「:after」と記述されるもの。

優先順位の計算方法

CSS2の仕様では、セレクタの優先順位の計算方法が以下のように決められています（参考: 6.4.3 Calculating a selector's specificity）。

セレクタの優先順位は詳細度によって決められます。詳細度の大きいセレクタほど優先順位は高くなります。

この3つの数字をa, b, cの順に連結して詳細度とします。

/* 詳細度の計算例 */
*            {}  /* a = 0, b = 0, c = 0, 詳細度 =   0 */
p            {}  /* a = 0, b = 0, c = 1, 詳細度 =   1 */
p a          {}  /* a = 0, b = 0, c = 2, 詳細度 =   2 */
.class       {}  /* a = 0, b = 1, c = 0, 詳細度 =  10 */
p.class      {}  /* a = 0, b = 1, c = 1, 詳細度 =  11 */
p a[href]    {}  /* a = 0, b = 1, c = 2, 詳細度 =  12 */
a[href]:link {}  /* a = 0, b = 2, c = 1, 詳細度 =  21 */
#id          {}  /* a = 1, b = 0, c = 0, 詳細度 = 100 */
#id p        {}  /* a = 1, b = 0, c = 1, 詳細度 = 101 */

例えば、「p a[href]」と「a[href]:link」の両方の条件を満たすa要素の場合、後者のスタイルが優先されます。

ブラウザの実装

すべてのブラウザがCSS2の仕様どおりの実装をしている訳ではないので注意が必要です。

例えば、Internet Explorer 6.0には:visited疑似クラスの優先順位が高くなるバグがあります。

<!-- HTMLの例 -->
<ul>
  <li><a href="a.html" class="special">文書a</a></li>
  <li><a href="b.html">文書b</a></li>
</ul>
/* CSSの例 */
a:visited { /* 詳細度は 11 */
  color: green;
}
li a.special { /* 詳細度は 12 */
  color: red;
}

上記の例の場合、文書a（a.html）と文書b（b.html）が訪問済みのとき、「文書a」は赤色、「文書b」は緑色になるはずです（実際、Mozilla Firefox 1.5やOpera 9.0はそのように表示します）。しかし、IE 6.0では両方とも緑色で表示されてしまいます（IE 7.0でも改善されていないようです）。

参考文献

連絡先: r e f l u x f l o w [あっとまーく] g m a i l . c o m