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

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

このページの目次
  1. はじめに
  2. セレクタの種類
  3. 優先順位の計算方法
  4. 参考文献
  5. 主な変更履歴

はじめに

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

セレクタの種類

まずは用語の確認(参考: 5 Selectors)。

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

優先順位の計算方法

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

詳細度は以下の方法で算出します(参考: 6.4.3 Calculating a selector's specificity)。

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

/* 詳細度の計算例 */
*            {} /* a = 0, b = 0, c = 0, d = 0, 詳細度 = 0,0,0,0 */
p            {} /* a = 0, b = 0, c = 0, d = 1, 詳細度 = 0,0,0,1 */
p a          {} /* a = 0, b = 0, c = 0, d = 2, 詳細度 = 0,0,0,2 */
.class       {} /* a = 0, b = 0, c = 1, d = 0, 詳細度 = 0,0,1,0 */
p.class      {} /* a = 0, b = 0, c = 1, d = 1, 詳細度 = 0,0,1,1 */
p a[href]    {} /* a = 0, b = 0, c = 1, d = 2, 詳細度 = 0,0,1,2 */
a[href]:link {} /* a = 0, b = 0, c = 2, d = 1, 詳細度 = 0,0,2,1 */
#id          {} /* a = 0, b = 1, c = 0, d = 0, 詳細度 = 0,1,0,0 */
#id p        {} /* a = 0, b = 1, c = 0, d = 1, 詳細度 = 0,1,0,1 */
/* style=""        a = 1, b = 0, c = 0, d = 0, 詳細度 = 1,0,0,0 */

例えば、「p a[href]」と「a[href]:link」の両方の条件を満たすa要素の場合、後者のスタイルが優先されます。なお、HTMLのstyle属性(例: <span style="..."></span>)に書かれているスタイルシート規則の詳細度は1,0,0,0(セレクタを持たないため、a以外の数値は0)です。

備考: 詳細度の算出方法はCSS2.1で上述のように変更されました。CSS2との違いは、style属性で指定された規則が最優先になったことと、擬似要素が詳細度に影響するようになったことです。

参考文献

主な変更履歴

2014年8月9日
CSS2.1の内容を反映しました。