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

気付いたらもう8月、世間は海水浴だBBQだととても楽しそうですが、我々はなんやかんや日々バタバタと過ごしております。
皆さんお元気でしょうか。私は休みが欲しいというのが口癖になってしまう前に、ちゃんと楽しい休みを取ろうと必死です。

さて、今回は「よく忘れるCSSの3大セレクタ」についてです。
どうも忘れがちなあの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;
}

いかがでしたでしょうか。ちゃんと覚えてちゃんと使ってちゃんと効率化しましょうね。
ではまた次回。

Web

Posted by demoya