セレクタの優先度

質問

普通はidのほうがclassよりポイント高いと思いますが
下記のような親要素にidで指定。子要素はclassで指定した場合、classが優先されます
この時、#hogeが子要素に働いているポイントは何ポイントになるのでしょうか？

classは10点なのでそれ以下となると予想では1点になっていると考えています

.hoge{ color: blue;}
#hoge{ color: red;}

<div id="hoge">
<p class="hoge">aa</p>
</div>

回答No.3

ORUKA1951 · ベストアンサー

違います。
「セレクタの優先度」は、誰が指定したか!!、important!(最重要宣言)があるかないかです。
　これは詳細度(特異性)-selector's specificityです。

　これらのカスケーディングの仕組みは、CSS(カスケーディング　スタイル シート)と言われるくらいですから、CSSの根幹!!命!!といえる重要な仕組みです。
　まっとうな説明サイトでしたら、まず単位に続いて、この部分が懇切丁寧に書かれているはずです。いきなりプロパティの説明に入るようでしたら、見ないほうが良いです。

　まず、優先順位は
[ユーザーの最重要宣言]＞[著者の最重要宣言]＞[著者の宣言]＞[ユーザーの宣言]＞デフォルト(ブラウザ)の宣言
　です。
　次に、詳細度でソートされます。詳細度は基数が大きい4桁の数[a,b,c,d]で比較します。
　　基数とは10進数だと10,16進数だと16,2進数だと2
　　・・ここは大きい基数ですから位上がりはしないということです。

　全称セレクタ 詳細度[0,0,0,0]
　タイプセレクタ,擬似要素 [0,0,0,1]
　要素セレクタ,クラスセレクタ,擬似クラスセレクタ[0,0,1,0]
　一意セレクタ [0,1,0,0]
　HTMLのstyle要素 [1,0,0,0]
　HTMLの属性での指定(body bgcolor=redとか)は[0,0,0,0]
　　です。

　そのうえで、「@importや外部スタイルシートはその場所に書かれている」とみなし、同じ優先度、詳細度の場合は後から書かれているもので上書きされます。
　それぞれのプロパティには、継承するかしないかも決まっていますので、それも考慮すること。

CSS2以降、
hoge{ color: blue;}
#hoge{ color: red;}
ではありません。CSS2では基点セレクタを先に書きますから、上記は
*.hoge{ color: blue;}
*#hoge{ color: red;}
　とみなされます。*(全称セレクタの詳細度は0、できれば、
p.hoge{ color: blue;}
div#hoge{ color: red;}
　のほうがベスト(自分自身が分かりやすくなりますし、ブラウザに余計な処理させない)
p.hoge{ color: blue;}　詳細度は[0,0,1,1]　　11
div#hoge{ color: red;}　詳細度は[0,1,0,1]　101
div.#hoge p.hoge[color:green;] 詳細度 [0,1,1,2] 詳細度 [0,1,1,2]

まあ、プロパティとかを書く前に、肝心な
5 Selectors( http://www.w3.org/TR/CSS2/selector.html )
6 Assigning property values, Cascading, and Inheritance( http://www.w3.org/TR/CSS2/cascade.html )
　を徹底的に身につけましょう。
この部分は、【CSS2.1】では、【CSS2】からいくつか変更になっています。
★現在ウェブ標準は、【CSS2.1】のほうです。

お礼

回答ありがとうございます
検索しまくって継承の詳細度を調べてみました
なんと、継承による詳細度は0点です！
道理で後に出てきた1点より弱くなるわけです＾＾；
やっと疑問が解けました

回答No.4

ORUKA1951

CSS2は、今は使われていませんので、CSS2.1のほうのリンクですが原文はNo.2の回答で示しましたが、最新のものは
　⇒Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification( http://www.w3.org/TR/CSS2/ )
すこし古いですが、CSS2.1の邦訳は、
　⇒Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html )
です。原文と照らし合わせながら利用してください。
★カスケーディングや詳細度の扱いが変わりました。この質問の部分です!!
★displayの値が変わりました。white-spaceの値が追加されたなど・・
★音声出力用のスタイルは附則になりました。
　いくつか大事なところが変更されていますから、CSS2.1のほうを参照すること。
　⇒変更点(CSS2.1 Appendix C 邦訳)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/changes.html )

お礼

解決しましたありがとうございました

回答No.2

play_with_you

#1です。
仕様書へのリンクを貼るのを忘れていました。

参考URL：

http://www.y-adagio.com/public/standards/tr_css2/cascade.html#specificity

お礼

見てみます

回答No.1

play_with_you

詳細度はIDのほうが上ですよ。
単に<p class="hoge">のほうが内側にあるからです。
詳細度の前に、「後から指定されたものが優先される」んです。(HTMLのほうの)idとclassを逆にしたら文字は赤くなります。

お礼

回答ありがとうございます
それはわかるのですが、継承したセレクタが何点かが知りたいのです