【CSS】セレクタの書き方まとめ

そもそもセレクタとは

test.css

h1 {
 color: #fff;
}

.sample {
 background-color: #fff;
}

上記コードで言うと、h1や.sampleがセレクタです！
CSSのプロパティを適用する対象のことですね！
今回はこのセレクタの様々な書き方についてまとめました！

セレクタの様々な書き方

Aクラスの中のBに適用する場合

セレクタの間にスペースを入れる。

test.html

<div class="A">
  <div class="B">あああああ</div>
</div>

test.css

.A .B {
 color: red;
}

この場合は"あああああ"が赤色になります。

AとB両方に適用する場合

セレクタをカンマで区切る。

test.html

<div class="A">あああああ</h1>
<div class="B">いいいいい</h1>

test.css

.A,.B {
 color: #fff;
}

この場合は"あああああ"と"いいいいい"両方が赤色になります。

Aの直下の階層にある要素に適用する場合

test.html

<div class="A">
  <h１>あああああ</h1>
</div>

test.css

.A > h1 {
 color: red;
}

この場合は"あああああ"が赤色になります。

隣接している要素に適用

test.html

<h１>あああああ</h1>
<h２>いいいいい</h２>
<h２>うううううう</h２>

test.css

h1 + h2 {
 color: red;
}

この場合は"いいいいい"のみが赤色になります！
"ううううう"はh1と隣接していないので適用されません！

ある要素の後ろにある要素に適用

test.html

<h２>いいいいい</h２>
<h１>あああああ</h1>
<h２>うううううう</h２>
<h２>えええええ</h２>

test.css

h1 ~ h2 {
 color: red;
}

この場合は"ううううう"と"えええええ"のみが赤色になります！
"いいいいい"は適用されません！

さいごに

以上、基本的なセレクタの書き方でした！
特に.A .Bと.A,.Bは基本ですが、間違えやすいので注意です！