<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 · ベストアンサー

出演者：
親方（class=div)
子分　dev

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

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

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

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

回答No.2

koutarou504

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

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

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

回答No.1

noname#19206

上記ソースを見た限りでは入れ子にされたdivの意味はないと思います。
提示された事例のものは以下のように省略できます。

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

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