CSSの優先順位に関して

質問

CSSで『後で書かれたものより、より厳密な条件に一致するセレクタによる指定が優先される』という規則は確実ですか？

例えば

.hoge.fuga{color:#00F}
.fuga{color:#F00}

という順番でスタイル指定されていたとしても、
class="huge fuga" の要素は確実に赤ではなく青になるんでしょうか？

回答No.2

ORUKA1951 · ベストアンサー

＞その仕様を無視したようなブラウザはないと考えて大丈夫でしょうか？
　質問の意味がわからないのですが、そもそもスタイルシートをサポートする時点で決まっていることです。
　また、これは特別なわけではなく、ごくごく一般的な常識としても成り立つわけです。

　たとえばスタイルシートを書くときには
body{font-family:********************;}
h1,h2,h3,h4,h5,h6,p{line-height:1.6em;margin:0;}
p{text-indent:1em;}
strong{color:red;}
などタイプセレクタから書き始めますよね。(これらは仕様の上では詳細度0,0,0,1です。)
ついで、
div.section p strong{font-size:1.1em;}
div.section blockguote p strong{font-size:1em;}

と、より詳しい設定に進んでいくと思います。より詳しく指定されている。
　--スタイルシートではselector's specificity と称される部分ですね。直訳すると選択子の明細、特殊性です。通常は詳細度と訳します。
　より詳しく、どの要素に適用させるか書かれているものがあれば、それが優先されなければ常識とずれてしまいます。

　何年何組の出席番号20番までの男の子は緑の服を着てください。
　何年何組の男の子は青い服を着てください。
　男の子は黒い服を着てください。

だとしたらよいかと言うことです。
　これをわかり易く数値で置き換えたものが詳細度です。
→5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )
→6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )
注) この中で詳細度については、現行のCSS2.1では変更になっています。
　→6.4.3 Calculating a selector's specificity ( http://www.w3.org/TR/CSS2/cascade.html#specificity )
　　適当な邦訳がないので、C. 変更点 ( http://www.d-toybox.com/spec/CSS2.1/appendixC/ )とあわせて読んでください。

　まあ、常識で判断できる範囲内だと思います。ただ、これを知っているかいないかでHTMLやCSSがものすごく違ったものになります。まず、デザインのためにHTMLを書く必要がなくなり、いずれもとてもシンプルでわかりやすくなるでしょう。

お礼

以前はIEなんかが独自仕様のスタイルシートを作ったり、
他のブラウザがほとんど対応している疑似要素に対応しなかったり
子要素セレクタ">"が使えなかったりとか、
全てのブラウザが策定通りに同じになっているとは限らないので
そういうことがないのか心配になってました

さすがに仕様にまとめられていることを無視して
独自仕様にするブラウザはないですよね
ありがとうございます

回答No.1

ORUKA1951

.hoge.fuga
と言うセレクタはclassセレクタですから、CSS2.1(現行のウェブ標準)の場合、次のように解釈されます。
基点となるセレクタが書かれていませんから、全称セレクタが省略されているとみなします。
---CSS2.1では基点となるセレクタを書くべきです。
すなわち
*.hoge.fuga
という形になります。
すなわち、class属性に半角スペースで区切られたリストに hoge と fuga を持つすべての要素にマッチします。
　<p class="hoge note important fuga">
　<h1 class="hoge note fuga">
とかです。この場合の詳細度は 0,0,2,0,ですね。全称セレクタは詳細度0です。
　これは要素セレクタのひとつですから
[class~="hoge"][class~="fuga"]とまったく同じです。

.fuga{}
　これは、classセレクタがひとつですから、詳細度は0,0,1,0になります。

　カスケーディングや詳細度はスタイルシートを学ぶとき、単位に続いて学ぶとても重要な部分です。color:#00f"よりは先に学ぶはずです。

　まず、
1) 出所と最重要宣言によるソート
　ユーザーの最重要宣言＞著者の最重要宣言＞著者の宣言＞ユーザーの宣言＞ブラウザのスタイルシート
2) その要素に適用される宣言を見つけ出したら、詳細度でソートする。
3)　詳細度が同じ場合は後出のものを適用--上書きされる。

タイプセレクタ、擬似要素セレクタは、d=1
属性セレクタ(クラスセレクタ含む)は詳細度、擬似クラスは c=1
一意セレクタは、詳細度 b=1
HTMLのstyle属性での指定は a=1 他の宣言は0とされる。

基数の大きなこの4桁の数値が詳細度です。
^^^^^^^^^^^^10進数の基数は10です。スタイルシートの場合基数は大きいです。=位上がりしないと言う意味。

　ここでclassセレクタは、詳細度が1ですから
な要素にマッチします。

補足

ブラウザごとに判断がゆだねられているわけではなく
仕様であとがきより詳細指定が優先されるようになっているのですね
ということはその仕様を無視したようなブラウザはないと考えて大丈夫でしょうか？