入れ子にしたddタグをcssで制御できません。

質問

入れ子にしたddタグのマージンをcssで指定してみましたが、うまくいきません。

</dd>
<dl>
　<dt>111111</dt>
　　<dd>22222222222222222</dd>
　　<dd>33333333333</dd>
　<dt>４４４４４４</dt>
　　<dd>５５５５５５５</dd>
　　　<dl>
　　　　<dt>６６６６６６６６</dt>
　　　　　<dd>７７７７７７７７７</dd>
　　　</dl>
　</dd>
</dl>

のようにｄｄの中にまたdlから始まるのを入れ子にしました。

それで、cssで

.hoge dd{
color:#FFFFFF;
margin:10px;
}

とすると、ddタグの文字が白くなります。それはわかるのですが、上の入れ子の例の７７７７７７のように入れ子になったddだけにスタイルシートを掛けたいのです。
試しに

.hoge dl dt dd dl dt dd{
color:#FFFFFF;
margin:10px;
}
や、
.hoge dd dl dt dd{
color:#FFFFFF;
margin:10px;
}
を試してみましたが、うまくいきませんでした。

どうしたら、入れ子の中のddだけにスタイルシートを適用できるようになりますでしょうか。もしくは、このようなddを入れ子にする方法は使わないのでしょうか。

回答No.1

Rayderl · ベストアンサー

次のようにすれば内側のddにだけスタイルが有効になります。

.hoge dd dd {
color:#FFFFFF;
margin:10px;
}

「.hoge dd dd」の代わりに「.hoge dl dd dl dd」でも有効になります。

試された方法でうまくいかなかった理由は、入れ子の指定の中にdtを入れているためだと思います。もし <dt><dd></dd></dt> となっているなら指定された方法で有効になりますが、実際には <dt></dt><dd></dd> のようにdtとddは同じ階層にありますから、入れ子の指定に入れてはいけないのです。

お礼

なるほど！目から鱗でした。

たしかに、dtは入れ子になってないですね。

たすかりました。ききたいことどんぴしゃな回答でした。

ありがとうございます。