【初心者CSS】間接セレクタ・隣接セレクタ・直下セレクタまとめ

CSSの間接セレクタ・隣接セレクタ・直下セレクタ、って知ってますか？
知ってる方はここ見なくて大丈夫です。
ちなみに私は見たことはあるけど知らないレベルです。

間接セレクタ・隣接セレクタ・直下セレクタとはなにか、使い方などをサンプル付きでまとめておきます。

間接セレクタ

ある要素以降の要素を指定するためのセレクタです。

それで何が便利かというと、見出しが繰り返し出てくる場合、最初の見出しに上マージンは要らないけど二つ目以降の見出しには広めのマージンが欲しい！！ってときです。
これね、けっこうありますからね！

これはh3見出しのいっこめはマージンなし、2個目以降は上マージンを50pxとってます。
間接セレクタは要素が飛んでも効くので、間にh4見出しはさんでますがその下のh3見出しはちゃんとマージンが取られてます。

HTMLサンプル

<h3>h3見出し</h3>
<p>本文本文本文本文本文本文本文本文本文</p>
<h3>h3見出し</h3>
<p>本文本文本文本文本文本文本文本文本文</p>
<h3>h3見出し</h3>
<h4>h4見出し</h4>
<p>本文本文本文本文本文本文本文本文本文</p>
<h3>h3見出し</h3>
<h4>h4見出し</h4>
<p>本文本文本文本文本文本文本文本文本文</p>

CSSサンプル

h3 ~ h3 { margin-top: 50px; }

これは定義つきリストのdtいっこめはマージンなし、2個目以降のdtは上マージンを50pxとってます。

CSSサンプル

dt ~  dt { margin-top: 50px; }

隣接セレクタ

ある要素のとなりの要素を指定するためのセレクタです。
h4見出しの隣のpにだけ赤い色をつけています。

CSSサンプル

h4 + p { color:red; }

直下セレクタ

ある要素の直下の要素を指定するためのセレクタです。
「one」のなかに「two」が入れ子になっています。
「one」直下のh3だけ赤くなっています。
「two」のなかにもh3がありますが、直下ではないので赤くならないんですね。

HTMLサンプル

<div class="one">
  <h3>h3見出し</h3>
  <p>本文本文本文本文本文本文本文本文本文</p>
  <h3>h3見出し</h3>
  <p>本文本文本文本文本文本文本文本文本文</p>
  <h3>h3見出し</h3>
  <p>本文本文本文本文本文本文本文本文本文</p>
    <div class="two">
      <h3>h3見出し</h3>
      <p>本文本文本文本文本文本文本文本文本文</p>
      <h3>h3見出し</h3>
      <p>本文本文本文本文本文本文本文本文本文</p>
    </div>
  <h3>h3見出し</h3>
  <p>本文本文本文本文本文本文本文本文本文</p>
</div>

CSSサンプル

.one > h3 { color:red; }

 
半角スペースで繋げると、「two」内のh3も赤くなります。

.one h3 { color:red; }

初心者CSS、間接セレクタ・隣接セレクタ・直下セレクタまとめ

セレクタを使えるようになると、いちいちこまかくクラス指定しなくてよくなるのでソースがすっきりしますよー。
いまだにどれがなんだか混乱する時がありますが…