2つの要素の関係によって特定の指定をするセレクタ「>」「+」「~」

harada 25views 更新:2015年5月14日

classに限らず要素そのものを指定してもいいのですが、ここでは以下のclass指定をしたと仮定して説明します。

<div class="sampleA">
 <div class="sampleB">(1)</div>
 <ul><li><div class="sampleB">(2)</div></li></ul>
</div>
<div class="sampleB">
(3)
</div>
<div class="sampleB">
(4)
</div>

.sampleA > .sampleB

要素sampleA直下の要素sampleB(1)にのみ適用されます。

.sampleA + .sampleB

要素sampleAと隣接している要素sampleB(3)にのみ適用されます。

.sampleA ~ .sampleB

要素sampleAの後ろにあるすべての要素sampleB(3)(4)に適用されます。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません