CSSの子セレクター

以下のコードがあるとします：

html<p>
  text <b><i>bold italic</i></b>
</p>
<p>
  text <i>just italic</i>
</p>

段落の子孫であるすべてのiタグを 選択したいとします。これを実行してみましょう：

cssp i {
  color: red;
}

コードの実行結果：

次に、段落の直接の子であるiタグのみを 選択してみましょう。これには子セレクター >が役立ちます。

その使い方を理解するために、 子孫セレクターと比較してみましょう。 このように：p i - 段落内のすべての イタリックを選択します。 一方、このように：p > i - 段落の直接の子であるイタリックのみを選択します。

このセレクターをHTMLコードに適用してみましょう：

cssp > i {
  color: red;
}

コードの実行結果：

html<ul>
  <li>
    <i>italic</i>
    <b>bold</b>
    <b><i>bold italic</i></b>
  </li>
  <li>
    <i>italic</i>
    <b>bold</b>
    <b><i>bold italic</i></b>
  </li>
</ul>