CSSセクレター 子孫のみに適用する方法

質問

子孫の要素のみに、CSSを適用する方法を教えてください。

下記は適用方法が分からないため、<a>に適用させていますが、
理想としては<a>の中の<div>要素に適用させたいのです。

※（最後のbox1margin:rgiht:0px;になりそれ意外のブロックが全てmargin:rgiht:10px;になる）

よろしくお願いします！

<!--HTMLの記述-->

<div class="box-wrapper">
<a href=""><div class="box1">ブロック１</div></a>
<a href=""><div class="box1">ブロック２</div></a>
<a href=""><div class="box1">ブロック３</div></a>
</div>

/*CSS側の記述*/
.box1{
width:100px;
height:20px;
background:#C6F;
text-align:center;
display:inline-block;
}

.box-wrapper > a{
margin:0 10px 0 0;
}

.box-wrapper > a:last-child{
margin:0;
}

回答No.2

axuaxua · ベストアンサー

補足どうもです。

.box-wrapper > :last-child div{
margin:0;
}

もっと良い方法ないかな～が本音です
ブラウザ:operaでのみ確認してます。

回答No.1

axuaxua

a:linkタグの中にDivを設置するのでなく、Divの中にa:linkを設置してください

cssは
.親クラス[半角スペース]タグです
.box1 a:link {...}

補足

ありがとうございます。

このソースではDIVの中に<a>タグでもいいのですが、
<a href=""><div class="box1">ブロック１</div></a>がもう少し複雑になった場合
<a><div></div><a>で対応したいです。

説明不足で申し訳ございません＞＜