<div>の中の<div>の意味

根本的な<div>の意味が分かってないと
思いますが私の質問にアドバイスをください。

.sub {
width:200px;
}
.sub div {
background-color:#CCCCCC;
}

1: <div class="sub">
2: <div>Sample</dev>
3: </dev>

上記のスクリプトにおいて<div>の中に<div>があります。これら２つの<div>の違いがよく分かりません。
アホに教えるようにご教授いただければ助かります。

No.3 ベストアンサー 回答者： exists 回答日時： 2006/01/28 12:38

出演者：

親方（class=div)
子分　dev

親方：やいdev 俺の縄張りで生きる限りは、おきては守ってもらうぜ、あえて線はひかねぇがなぁー。幅200px；これから、一歩でもはみ出したやつは、ゆるさねぇぜ。ふっ、、、

dev：わかぇりやした親分、ただ俺たち、まだ若いんで、色気もありゃス。色は、つけてもいいですか?

親方；バカヤロ、まだ俺の気持ちがわかんねぇのか！！
幅を守れば、後の細かいことは、お前らに任せるっていってるじゃねぇか。

同じ人間でも、親分子分があるように、divタグにも、
親分子分があるということ。

No.2 回答者： koutarou504 回答日時： 2006/01/26 21:41

まぁ一応・・・。

外側の DIV は横幅を指定してあり、
内側の DIV は背景色を指定しています。
ただ、２つに分ける必要性はあまりなく、１つでも同じ事が可能です。
（＃１の方が提示済み）


で、細かく書くと質問で例示されている２つの違いというのが
外側の DIV は CLASS属性で属性値が sub となっている事で CSS にて横幅が 200px と指定されているという事。ただ、自分を含む要素の CLASS属性に sub という属性値を持つ要素はないので背景色の指定はない。
内側の DIV には CLASS属性はないので特に横幅の指定はない。ただ、他の要素の内部であるのでその影響をうける。そして自分を含む要素の CLASS属性に sub という属性値を持つ要素がある DIV 要素なので、CSS にて背景色が #CCCCCC と指定されている。


という事で、違いが明確化してくるのは、
例示のソースにいろいろ付加された場合になります。

No.1 回答者： noname#19206 回答日時： 2006/01/26 17:40

上記ソースを見た限りでは入れ子にされたdivの意味はないと思います。

提示された事例のものは以下のように省略できます。

.sub {
width:200px;background-color:#CCCCCC;
}

<div class="sub">
Sample
</div>