CSS Childセレクタ (>) を使用した要素の選択方法

1. 子要素の直接の選択: Childセレクタを使用すると、親要素の直接の子要素のみを選択することができます。例えば、以下のようなHTMLがあるとします。

<div class="parent">
  <h1>タイトル</h1>
  <p>本文</p>
  <ul>
    <li>リスト1</li>
    <li>リスト2</li>
  </ul>
</div>

次のCSSコードを使用して、.parent クラスの直接の子要素である <h1> 要素を選択します。

.parent > h1 {
  color: red;
}

この場合、<h1> 要素のテキストカラーが赤色になります。

2. 複数の子要素の選択: Childセレクタは、複数の子要素を選択する際にも使用できます。例えば、以下のHTMLがあるとします。

<ul class="parent">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
  <li>リスト5</li>
</ul>

次のCSSコードを使用して、.parent クラスの直接の子要素である <li> 要素の最初の3つを選択します。

.parent > li:nth-child(-n+3) {
  background-color: yellow;
}

この場合、最初の3つの <li> 要素の背景色が黄色になります。

以上が、CSSのChildセレクタ (>) の使用方法とコード例です。これを活用することで、より具体的な要素の選択とスタイリングが可能になります。