CSS：隣接セレクタ、直下セレクタを使いこなそう

隣接セレクタ

.test + div {
    /* クラス「test」に隣接したdivにスタイル適用 */
}

<div class="test"></div>
<div>このdivにスタイル適用</div>
<div>このdivには適用せず</div>

隣り合う要素に対してスタイルを定義するセレクタです。

動的にあるブロックが出たり消えたりする場合などに使えます。

直下セレクタ

.test > div {
    /* クラス「test」直下のdivにスタイル適用 */
}

<div class="test">
    <div>
        このdivにスタイル適用
        <div>
            このdivには適用せず
        </div>
    </div>
</div>

ある要素の直下の子要素にスタイルを定義するセレクタです。

孫要素までには適用させたくないけど、クラスを小分けするのが面倒といったケースなどに使えます。