Edit

Page

Page title:

Page body:

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

* 仕様書

[REFS[
- [9] [CITE@en[Selectors Level 3]] ([TIME[2011-09-29 22:16:17 +09:00]] 版) <http://www.w3.org/TR/selectors/#specificity>
]REFS]

* 訳語

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

* 定義

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

- [10] [VAR[a]] は[[ID選択子]]の個数です
- [11] [VAR[b]] は[[クラス選択子]]、[[属性選択子]]、[[擬似クラス]]の数です
-- [12] ただし [CODE(CSS)@en[[[:not()]]]] は数に入れません
-- [13] [CODE(CSS)@en[[[:not()]]]] の引数の[[単純選択子]]は通常通り数えます
- [14] [VAR[c]] は[[型選択子]]と[[擬似要素]]の数です
-- [15] [[普遍選択子]]はどの数にも入りません

[EG[
[17] 例えば [CODE(CSS)[#foo .bar:not(baz) [hoge][fuga] *::after]] の[[特異度]]は 132 です。
]EG]

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

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

* 歴史

** CSS1

[REFS[
- [21] [CITE[Cascading Style Sheets, level 1]] ([TIME[2008-04-10 02:23:32 +09:00]] 版) <http://www.w3.org/TR/CSS1/#cascading-order>
]REFS]

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

** CSS2

[REFS[
- [23] [CITE@en[Assigning property values, Cascading, and Inheritance]] ([TIME[2011-06-07 22:09:52 +09:00]] 版) <http://www.w3.org/TR/CSS2/cascade.html#specificity>
]REFS]

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

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

** CSS2 と選択子3の差異

*** [CODE(HTMLa)@en[style]] 属性

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

*** 擬似要素の数

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

[REFS[
- [5]
[CITE@en[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)]] 著, [CODE[2007-09-21 01:51:12 +09:00]] 版) <http://lists.w3.org/Archives/Public/www-style/2006Jan/0096.html>
]REFS]

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

* メモ

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

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

[4]

[PRE(CSS example code)[
p, body p {
  color: green;
}
p {
  color: red;
}
]PRE]

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

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

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

[27] [CITE@en[Re: ''''''[''''''selectors4'''''']'''''' Specificity in base 256]]
( ([[Tab Atkins Jr.]] 著, [TIME[2012-08-16 23:50:28 +09:00]] 版))
<http://lists.w3.org/Archives/Public/www-style/2012Aug/0462.html>

[28] [[Chrome]] では256個あっても勝てなくなっていました。不具合が修正されてるみたいです。
[TIME[2013-11-19T01:52:35.200Z]]

[29] [CITE@en['''['''selectors-4''']''' Specificity Fixes: add cross-references, fix definition…]]
([[fantasai]]著, [TIME[2018-01-01 23:03:21 +09:00]])
<https://github.com/w3c/csswg-drafts/commit/88b91c0486c3f22f59cad547a13545712dbf785f>

[30] [CITE@en['''['''selectors-4''']''' mention the specificity rules for special pseudo-classes · Issue #2129 · w3c/csswg-drafts]]
([TIME[2018-05-05 12:02:26 +09:00]])
<https://github.com/w3c/csswg-drafts/issues/2129>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)