CSS子コンビネーター (>) - 直接の子要素の選択

子コンビネーター (>)

子コンビネーターは、指定された親の直接の子である要素を選択します。より深い子孫にはマッチしません。

構文

parent > child {
  /* スタイル */
}

子孫 vs 子

<ul class="nav">
  <li>項目 1
    <ul>
      <li>ネストされた項目</li>
    </ul>
  </li>
  <li>項目 2</li>
</ul>

/* 子孫 — .nav内のすべてのli要素にマッチ */
.nav li { color: blue; }

/* 子 — .navの直接のli子要素のみにマッチ */
.nav > li { color: red; }

内側の<ul>内のネストされた<li>は、.nav li（子孫）には選択されますが、.nav > li（子コンビネーター）には選択されません。

詳細度

子コンビネーター自体には詳細度の重みはありません。詳細度は両側のセレクターから来ます：

/* 詳細度: (0, 1, 1) — 1つのクラス + 1つの要素 */
.nav > li { }

よくあるユースケース

1. ナビゲーションメニュー — ドロップダウンに影響を与えずにトップレベルのメニュー項目のみスタイリング
2. Grid/Flexレイアウト — 直接の子要素のみにレイアウトプロパティを適用：.grid > *
3. コンポーネントスコーピング — ネストされたコンポーネントへのスタイル漏れを防止
4. リストスタイリング — ネストされたリストの最初のレベルのみをターゲット

パフォーマンス

子コンビネーターは、ブラウザがサブツリー全体をトラバースするのではなく、1レベルのネストのみをチェックすればよいため、子孫コンビネーターよりもわずかにパフォーマンスが良いです。