[7] [DFN[[RUBYB[[[特異度]]]@en[specificity]]]]は、[[選択子]]と[[要素]]の[[一致]]において、 その[[選択子]]の指定の細かさを表す値です。 [[CSS]] で複数の[[スタイル宣言]]の[[選択子]]がある[[要素]]と[[一致]]するときに、 [[勝ち宣言]]を決定するために[[特異度]]の大小が用いられます。 * 仕様書 [REFS[ - [9] [CITE@en[Selectors Level 3]] ([TIME[2011-09-29 22:16:17 +09:00]] 版) ]REFS] * 訳語 [3] [CITE[CSSの「specificity」を日本語で何と呼んでいますか? - 人力検索はてな]] ([CODE[2007-09-01 12:28:04 +09:00]] 版) * 定義 [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]] 版) ]REFS] [22] [[擬似要素]]と[[擬似クラス]]は数えないことになっていました。 ** CSS2 [REFS[ - [23] [CITE@en[Assigning property values, Cascading, and Inheritance]] ([TIME[2011-06-07 22:09:52 +09:00]] 版) ]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]] 版) ]REFS] [19] しかし最終的な[[選択子3]] [[勧告]]では[[擬似要素]]も[[要素]]と一緒に [VAR[c]] の数に入れられています。 * メモ [1] [CITE@en[CSS: Specificity Wars | And all that Malarkey]] ([CODE[2007-04-10 19:23:56 +09:00]] 版) ([[名無しさん]]) [2] [CITE[CSS Specificity Calculator]] ([CODE[2007-04-26 22:05:44 +09:00]] 版) [4] [PRE(CSS example code)[ p, body p { color: green; } p { color: red; } ]PRE] ;; のような場合、[CODE(CSS)@en[[[body]] [[p]]]] は冗長だけど、[[詳細度]]の算出と[[カスケーディング]]の都合上、一致するのかどうか調べないといけない。 [26] [CITE[256個の.classを並べると#idを上書きできるらしい… | IDEA*IDEA]] ( ([TIME[2012-08-16 08:02:04 +09:00]] 版)) [27] [CITE@en[Re: ''''''[''''''selectors4'''''']'''''' Specificity in base 256]] ( ([[Tab Atkins Jr.]] 著, [TIME[2012-08-16 23:50:28 +09:00]] 版)) [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]]) [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]])