特異度

特異度 (選択子)

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

目次

  1. 仕様書
  2. 訳語
  3. 定義
  4. 歴史
    1. CSS1
    2. CSS2
    3. CSS2 と選択子3の差異
      1. style 属性
      2. 擬似要素の数
  5. メモ

仕様書#

訳語#

[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>