[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) [hogefuga] *::after の特異度は 132 です。

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

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

歴史

CSS1

  • [21] Cascading Style Sheets, level 1 ( 版) http://www.w3.org/TR/CSS1/#cascading-order

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

CSS2

  • [23] Assigning property values, Cascading, and Inheritance ( 版) http://www.w3.org/TR/CSS2/cascade.html#specificity

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

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

CSS2 と選択子3の差異

style 属性

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

擬似要素の数

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

  • [5] Re: specifity in CSS3 vs. CSS2.1 from L. David Baron on 2006-01-21 (www-style@w3.org from January 2006) (L. David Baron (dbaron@dbaron.org) 著, 2007-09-21 01:51:12 +09:00 版) http://lists.w3.org/Archives/Public/www-style/2006Jan/0096.html

[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;
}
http://suika.fam.cx/gate/2007/cssom/viewer?c=p%2C%20body%20p%20%7B%0A%20%20color%3A%20green%3B%0A%7D%0Ap%20%7B%0A%20%20color%3A%20red%3B%0A%7D%0A;h=%3Cp%3EXXXXX%3C%2Fp%3E;p=n;x=style-element

のような場合、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