クラスは束になってもIDに勝てない
CSSの詳細度について僕がしていた勘違い。それは、「クラスも10個以上になればIDに勝てる」という思いこみです。ほかにもそういう風に思っている方がいらっしゃるかもしれません。
CSS2の仕様書の詳細度の算出例をみると次のように書かれています。
* {} /* a=0 b=0 c=0 -> specificity = 0 */
LI {} /* a=0 b=0 c=1 -> specificity = 1 */
UL LI {} /* a=0 b=0 c=2 -> specificity = 2 */
UL OL+LI {} /* a=0 b=0 c=3 -> specificity = 3 */
H1 + *[REL=up]{} /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red {} /* a=0 b=1 c=3 -> specificity = 13 */
LI.red.level {} /* a=0 b=2 c=1 -> specificity = 21 */
#x34y {} /* a=1 b=0 c=0 -> specificity = 100 */
導き出されたspecificityの値をみると、21や100といったようになっているので、IDはひとつ100点、それ以外の属性や擬似クラスはひとつ10点、要素名はひとつ1点という具合に考えてしまって、単純にそれらの値を足し算すれば良いものかと思っていました。
ただこれですと、「クラスが10個集まったら10*10=100だからIDひとつと並ぶのか」、「11個のクラスならひとつのIDに勝てるのか」といったように考えてしまいがちです。
実際には、クラスは所詮クラスということで、いくら束になったところでIDひとつに勝てません。同様に、いくら要素名を書き連ねたところで、それはクラスひとつに勝てません。
よく使われる「詳細度=a*100+b*10+c*1」といった計算式が成り立つのは、あくまでそれぞれの数が10未満の場合というわけです。
CSS2.1では詳細度の算出例が次のように変わっていました。
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
aの部分をstyle属性が使っているので、アルファベットが合計4つになったほか、算出された詳細度が「0,1,0,0」といったように、なにやら「,（カンマ）」で区切られています。もしかすると先のような誤解を生まないよう配慮しているのかもしれません。ただ、こうして数字を区切ってしまうと、そもそも四つを連結して並べる必要性がよくわからないし、その値もちょっと意味不明な感じになってしまっています。
詳細度は、点数にして覚えるよりも、優先順位をつける流れをしっかり頭にたたき込んでおくほうがわかりやすい気がします。例えばCSS2.1ならば次のような具合です。
- まずstyle属性が最優先
- 次にセレクタ内のIDセレクタの合計が多い方を優先
- IDセレクタの数が同じなら、クラスセレクタ、属性セレクタ、擬似クラスの合計が多い方を優先
- それも数が同じならば、要素セレクタ、擬似要素の合計が多い方を優先
- さらにそれも数が同じならば、詳細度による順位付けはあきらめて、宣言の位置によって優先するほうを決定
これならば「クラスが10個集まったら・・・」なんて発想をそもそもしなくて済みます。
それからCSSの仕様書で、アルファベットをa-b-cといったように横に並べて十進数に見立てる意図は一体何なのでしょうか。そのせいで随分とややこしくなっている気がします。
このエントリーのトラックバックURL
http://www.extype.com/mt/mt-tb.cgi/845
» CSS2.1 詳細度 どのStyleが優先されるのか from MEMOUK
CSSにはどのCSSが優先されるか というお話 ク... [続きを読む]
