基礎16. セレクタの種類（子孫セレクタ、子セレクタ、全称セレクタ）

ネストと親子関係

親要素の直下の要素を「子」。入れ子内のすべての要素を「子孫」と言います。どの要素を「親」とするかで「子」「子孫」は変わります。今回のセレクタを理解する上で重要なことです。

子孫セレクタ

親とその子孫という形で指定するセレクタです。親と子孫は半角スペースで区切ります。子孫はいくつでも指定できます。子孫セレクタは、idセレクタ、classセレクタ、要素セレクタなど他のセレクタと組み合わせて指定します。
下記の場合はclass名「sec」内のすべてのpタグが対象になります。

<div class="sec">
  <p>子の段落です</p>
  <div>
    <p>子孫の段落です</p>
    <div>
      <p>子孫の段落です</p>
    </div>
  </div>
</div>

.sec p{
  color: #00ffff;
}

子セレクタ

親と直下の要素で指定するセレクタです。親と子は「>」で区切ります。子は、いくつでも指定ができます。子孫セレクタと同じくidセレクタ、classセレクタ、要素セレクタなど他のセレクタと組み合わせて指定します。子孫セレクタとの違いは、親の直下の要素のみが対象となります。
下記の場合はclass名「sec」内の直下のpタグが対象になります。入れ子のdivタグ内のpタグは対象外になります。

<div class="sec">
  <p>子の段落です</p>
  <div>
    <p>子孫の段落です（除外）</p>
    <div>
      <p>子孫の段落です（除外）</p>
    </div>
  </div>
</div>

.sec > p{
  color: #00ffff;
}

全称セレクタ（ユニバーサルセレクタ）

*（アスタリスク）をセレクタにすると、すべての要素が対象になります。主にCSSのリセットや初期設定に使用します。下記は、すべてのタグの「外余白」「内余白」をなしにします。

*{
  margin: 0;
  padding: 0;
}

子孫セレクタ、子セレクタに使用すると親要素内の子孫または子すべての要素が対象になります。記の場合はclass名「sec」内のdivタグ、pタグが対象になります。

<div class="sec">
  <p>子の段落です</p>
  <div>
    <p>子孫の段落です</p>
    <div>
      <p>子孫の段落です</p>
    </div>
  </div>
</div>

.sec *{
  color: #00ffff;
}

まとめ

• 「子孫セレクタ」は、親と子孫で指定したセレクタ
• 「子セレクタ」は、親と直下の子で指定するセレクタ
• 「全称セレクタ」は、すべての要素を指定するセレクタ