よく忘れるCSSの3大セレクタを覚える

「>」をちゃんと覚える

「>」は子要素だけに適用させるという意味のセレクタです

HTMLはこう↓

<div class="ex_1">
    <p>ここにだけ適用されます</p>
    <div>
        <p>ここは孫要素になるので適用されません</p>
    </div>
</div>

CSSはこう↓

.ex_1 > p {
    color: #f00;
    font-weight: bold;
}

「+」をちゃんと覚える

「+」は同じ階層の「直後の要素にだけ」適用させるという意味のセレクタです

HTMLはこう↓

<p>ここは適用されない</p>
<p class="ex_2">ここも適用されない　←ここにクラスを書く</p>
<p>ここに適用される</p>
<p>ここは適用されない</p>

CSSはこう↓

.ex_2 + p {
    color: #00f;
    font-weight: bold;
}

「~」をちゃんと覚える

「~」は同じ階層の「後ろに並ぶ要素に」適用させるという意味のセレクタです

HTMLはこう↓

<p>ここは適用されない</p>
<p class="ex_3">ここも適用されない　←ここにクラスを書く</p>
<p>ここは適用される</p>
<p>ここも適用される</p>

CSSはこう↓

.ex_3 ~ p {
    color: #0f0;
    font-weight: bold;
}