詳細度

特異度 (選択子)

[7] 特異度 (specificity) は、選択子要素一致において、 その選択子の指定の細かさを表す値です。 CSS で複数のスタイル宣言選択子がある要素一致するときに、 勝ち宣言を決定するために特異度の大小が用いられます。

仕様書

訳語

[3] CSSの「specificity」を日本語で何と呼んでいますか? - 人力検索はてな (2007-09-01 12:28:04 +09:00 版) <http://q.hatena.ne.jp/1188048922>

定義

[8] 特異度は十分大きな基数による3桁の abc として表します >>9

[17] 例えば #foo .bar:not(baz) [hoge特異度は 132 です。

[16] 3桁の数として表されますが、十分大きな基数を想定しているので、繰り上がりのようなものはありません。

[18] 例えば e1 e2 e3 e4 e5 e6 e7 e8 e9 e10 e11 #id1特異度は (1, 11, 0) です。

歴史

CSS1

[22] 擬似要素擬似クラスは数えないことになっていました。

CSS2

[24] 擬似クラスは数えることになりました。

[25] 擬似要素CSS 2.1 では数えることになっています。

CSS2 と選択子3の差異

style 属性

[20] CSS 2.1style 属性も含めた abcd の4桁の数で特異度を表していました (stylea)。 選択子3style 属性の扱いは CSS で規定するとして特異度の定義に含めていません。

擬似要素の数

[6] CSS 2.1擬似要素詳細度の計算に入れるといっており、 CSS 3 は入れないと言っていたのですが、 実際に擬似要素要素の両方が同じものと一致することはないので、 問題にはならないと >>5L. David Baron は書いています。

[19] しかし最終的な選択子3 勧告では擬似要素要素と一緒に c の数に入れられています。

メモ

[1] CSS: Specificity Wars | And all that Malarkey (2007-04-10 19:23:56 +09:00 版) <http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html> (名無しさん)

[2] CSS Specificity Calculator (2007-04-26 22:05:44 +09:00 版) <http://www.rebelinblue.com/specificity.php>

[4]

p, body p {
  color: green;
}
p {
  color: red;
}

のような場合、body p は冗長だけど、詳細度の算出とカスケーディングの都合上、一致するのかどうか調べないといけない。

[26] 256個の.classを並べると#idを上書きできるらしい… | IDEA*IDEA ( ( 版)) <http://www.ideaxidea.com/archives/2012/08/256classes.html>

[27] Re: [selectors4] Specificity in base 256 ( (Tab Atkins Jr. 著, 版)) <http://lists.w3.org/Archives/Public/www-style/2012Aug/0462.html>

[28] Chrome では256個あっても勝てなくなっていました。不具合が修正されてるみたいです。

[29] [selectors-4] Specificity Fixes: add cross-references, fix definition… (fantasai著, ) <https://github.com/w3c/csswg-drafts/commit/88b91c0486c3f22f59cad547a13545712dbf785f>

[30] [selectors-4] mention the specificity rules for special pseudo-classes · Issue #2129 · w3c/csswg-drafts () <https://github.com/w3c/csswg-drafts/issues/2129>