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

goto_jp 4,296views 更新:2014年7月24日

隣接セレクタ

.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>

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

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

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

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

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