CSSの定義でdiv#・・・って、#・・・じゃだめですか？

質問

よろしくお願いします。

CSSの定義で思ったのですが、普通divに対してid定義を行った場合には、

#nantoka{

}

と記述すると思うのですが、たまに
div#nantoka{

}

と定義されているものを見かけます。
これにはどういった意味があるのでしょうか？

また、

p#nantoka{

}

である場合もあるのですが、単純に

#nantoka{

}

ではだめなのでしょうか？

こういった定義の意味やメリットをご存知の方は教えていただけると幸いです。

よろしくお願いします！

回答No.1

steel_gray · ベストアンサー

#の前に要素名を付ける/付けないでの違いは詳細度(*1)の算出で違いが出るものの基本的には変らないです。

要素名も併記してあった方が、ニンゲンが多少整理が付くとか、判り易く思える、とか、そういった意味はあるのかもしれませんね。

*1
http://refluxflow.net/2006/08/css_selector_specificity.html#ID160FA309
例）
p#nantoka {color:blue;}/* 1 */
#nantoka {color:red;}/* 2 */
このような２つの記述が在った場合、後に書いた方ではなく、
「詳細度」により１行目が適用される。
ややこしくなるだけなんで、どちらかに統一するべきだし、
一人で全てを書いてる時なら好くな方で統一すればいいけど
複雑な状況でページ造りをしなきゃいけない場合、要素名を付けておく方で統一した方が無難かも。

回答No.2

grumpy_the_dwarf

hoo#baaは「baaなidを持つhoo要素」であり、#baaは「なんでもいい
からbaaなidを持つ要素」です。つまり、#baaで指定したスタイル
は、別のページで別の要素に同じidを付けていると適用してくれる
ことになります。id=contentsがdivなページとiframeなページが混
在しててもいいわけですね。

で、ウマくいかない部分はiframe#contentsのように細かく指定して
上書きできます。