【CSS】セレクタ名の頭にDIVがついている

質問

いろんなページのCSSを参考にみていると
div#boxcontact{
}
みたいな感じで、
#の頭に　DIVを付けている命名を多く見受けられます。
しかし、p#box　や、　strong#box　　なんかは　あまり見受けられません。
#boxcontact{
}
でも問題はないとおもうのですが、　なぜ先頭に　DIV を付けるのでしょうか。

回答No.2

ORUKA1951 · ベストアンサー

CSS2.1では、セレクタは単純セレクタを結合子(#, (半角スペース),>,+など)でつなぎます。
　したがって、
#boxは、*#boxとみなして処理します。この場合詳細度は[0,1,0,0]になりますね。
5.3 Universal selector ( http://www.w3.org/TR/CSS2/selector.html#universal-selector )

全称セレクタはc=0なので。
　全称セレクタは詳細度がc=0なので、省略できますが、本来は書くべきです。一意セレクタ(結合子は#)は、その文書中に一箇所しか存在しませんし、詳細度がb=1なので多くの場合支障はありませんが、
p#important{color:red;} /* 詳細度[0,1,0,1] */
と
#important{color:green;} /* 詳細度[0,1,0,0]
と並列して書くと、順番に関係なく上記が有効となります。

　意味的に#boxは*#boxのこと[詳細度0100]であり、p#boxは要素セレクタに?がったもので詳細度は[0101]になりますね。

★現在、標準として使用されているCSS2では、#boxは、全称セレクタ(universal selector)を省略した表し方と言う意味です。
★逆に言うと、*#boxの*は省略できる。
★div#boxとは意味が違う。
　本来一意セレクタなので、*をつける(あるいは省略)した場合は、同じ要素を指定しますが、タイプセレクタ(要素名のこと)をつければ詳細度を上げることができる。

　詳細度と結合子の関係はとても重要--CSSの最も根幹部分--です。プロパティより重要です。

ここからは直接関係ないですが

注) id=boxなんて通常は書かない。
　idは本来はアンカーの終点であって、スタイルシートで特定の要素を対して、特異的にスタイルを定義したいときに使いますが、詳細度が高すぎて、詳細度で上書きしにくい。
　アンカー終端ですから、id="siteMenue"のように、あとから読み直して解るものをつける。スタイルシートのためだけにIDをつけるのは初心者以外余りありませんが、それでもあとで文書のどこを示しているかわかるように命名する。

たとえばHTMLが
<div class="article">
　<div class="header">
　　<h1>見出し</h1>
　　<div class="abstract">
　　　<p>このページの要約でここは<strong>重要</strong></p>
　　</div>
　<div class="nav" id="pageIndwx">
　　<ol>
　　　<li><a href=""></a></li>
　　　<li><a href=""></a></li>
　　　<li><a href=""></a></li>
　　</ol>
</div>
<div class="section" id="section1">
　<h2>本文見出し</h2>
　<p>ここから本文、この部分は、<strong>重要</strong>です。
</div>

のように、class名を文意上意味があるものにしていたら。
strong{color:red;}/* 詳細度[0001]*/
div.header p{font-size:0.9em;}/* 詳細度[0012] */
div.section p strong{color:green;font-weight:normal;}/* 詳細度[0013] */

と、わざわざIDを振る必要はありませんし、後でメンテナンスも

strong要素は{color:red;}赤字で・・・
div.headerの子孫のp段落は{font-size:0.9em;}一回り小さな文字で
div.section本文の p段落内の strong{color:green;}は赤字で普通の太さで・・

　とHTMLを見なくても指定できますし、スタイルシートのために煩雑で解りにくいHTMLを書く必要もない。HTMLもCSSもとても簡単でメンテナンスも容易になりますね。
　まあ、アンカー終点でもないのにIDをつけるのはおかしいとでも覚えて置きゃよいです。CSSカスケーディングスタイルシートですから、カスケーディングを使えば無駄なIDやclass名はいらない。そのためのCSSですからね。

お礼

回答ありがとうございます。
http://oshiete.goo.ne.jp/qa/3925412.html
で、同じ質問をした方がいたので
すでに解決に至っていましたが、
大変参考になりました。

回答No.1

suzuko

classセレクタとidセレクタの違いかと。

お礼

回答ありがとうございます。