子結合子 (child combinator, >) は2つの CSS セレクターの間に配置されます。2つ目のセレクターが1つ目のセレクターの子要素の場合にのみマッチします。

/* "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 の定義
勧告 初回定義。

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 7Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

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

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