CSSにおけるセレクタの固有性(詳細度)の計算式

CSS

固有性(specificity)の計算式


CSS3 ではセレクタの下記手順で固有性(specificity)を求めます(CSS2では否定セレクタが存在しないだけで計算式は同様)。

  • ID属性の数を a とする)
  • 他の属性セレクタ、擬似クラスの数を b とする
  • タイプセレクタ(要素)の数を c とする
  • 否定セレクタは引数と同じ数として計算される
  • 擬似要素を無視する。
  • a-b-cを連結して固有性(specificity)を求める

仕様では "#id" の固有性を 100 のように表しているため、b の数が10を超えると10進数の繰上げが発生しそうですが、連結なので繰り上げは発生しません。
例えば、「a=1, b= 11, c= 15」なら固有性は 1-11-15 のように連結されます。16進数で表すなら "1AF" となり、基数に制限のない数値と解釈してもいいかもしれません。

サンプルによる説明

<style type="text/css">
/* 固有性 = 1-0-0 */
#Sample { background-color: #fee; }

/* 固有性 = 0-11-0 */
.a.b.c.d.e.f.g.h.i.j.k.l { background-color: #eef; }
</style>
</head>
<body>
<div id="Sample" class="a b c d e f g h i j k l">#Sample.a.b.c.d.e.f.g.h.i.j.k.l</div>

固有性が 1-0-0 であるIDセレクタが優先されます。

参考リンク