子孫セレクタ、子セレクタ

HTMLでは要素のネスト（入れ子）がよく使われています。
入れ子とは要素の中に要素が入っている状態、マトリョーシカのような状態で設定されています。

入れ子構造では、外側を囲む要素が親、内側の要素が子という親子関係のような構造になっています。

ネストと親子関係のイメージ

入れ子構造のタグに対しては、子セレクタ・子孫セレクタによるCSSの記述がとても便利です。

子セレクタ

子セレクタは、親要素の中にある子要素に対しスタイルを適用します。
セレクタ部分に「>」を使って「親要素A > 子要素B」のように繋ぎます。

▼CSS

section > p{
color:red;
}

▼HTML

<section>
  <p>sectionの子要素です</p>
  <p>sectionの子要素です
  <p>sectionの孫要素です</p>
</section>

子セレクタの場合、子要素の子要素、つまり孫要素には適用されません。

セレクタ部分にはもちろんクラスや属性（id）で設定することも可能です。

▼CSS

section > .exsample{
color:red;
}

と記述した場合は、

▼HTML

<section>
  <p class="exsample">sectionの子要素です</p>
  <p>sectionの子要素です
  <p>sectionの孫要素です</p>
</section>
<p class="exsample">class="exsample"は適用されません</p>