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

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

<div class="sampleA">
 <div class="sampleB">（１）</div>
 <ul><li><div class="sampleB">（２）</div></li></ul>
</div>
<div class="sampleB">
（３）
</div>
<div class="sampleB">
（４）
</div>

.sampleA > .sampleB

要素sampleA直下の要素sampleB（１）にのみ適用されます。

.sampleA + .sampleB

要素sampleAと隣接している要素sampleB（３）にのみ適用されます。

.sampleA ~ .sampleB

要素sampleAの後ろにあるすべての要素sampleB（３）（４）に適用されます。