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>

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

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

AWSを利用した導入事例のご紹介

実際に構築を行ったAWSの事例を紹介しています。導入の目的に近い事例をご覧いただくと、実際の構成例やメリット、注意点などが把握できます。

ブックオフコーポレーション株式会社様
第一生命保険株式会社様
株式会社電通様
株式会社LIFULL様
株式会社リブセンス様
TBSアナウンス部様
明治大学様
拓殖大学様