子結合子 (child combinator, >) は2つの CSS セレクターの間に配置されます。1つ目のセレクターに一致する要素の子である、2つ目のセレクターに一致する要素にのみを選択します。

/* "my-things" リストの子のリスト項目 */
ul.my-things > li {
  margin: 2em;
}

2つ目のセレクターに一致する要素は、1つ目のセレクターに一致する要素の直接の子でなければなりません。これは、1つ目のセレクターに一致する要素を先祖に持てば、その間の DOM 上の「段数」にかかわらず、2つ目のセレクターに一致する要素すべてを選択する子孫セレクターよりも厳密です。

構文

セレクター1 > セレクター2 { スタイルプロパティ }

CSS

span {
  background-color: white;
}

div > span {
  background-color: DodgerBlue;
}

HTML

<div>
  <span>Span #1, in the div.
    <span>Span #2, in the span that's in the div.</span>
  </span>
</div>
<span>Span #3, not in the div at all.</span>

結果

仕様書

仕様書 策定状況 コメント
Selectors Level 4
child combinator の定義
草案
Selectors Level 3
child combinators の定義
勧告 変更なし。
CSS Level 2 (Revision 1)
child selectors の定義
勧告 初回定義。

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応11217 あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり4 あり あり あり

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, ethertank, sosleepy
最終更新者: mfuji09,