子結合子

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

/* "my-things"クラスを持つリストの子要素であるリスト項目 */
ul.my-things > li {
  margin: 2em;
}

2つ目のセレクターに一致する要素は、1つ目のセレクターに一致する要素の直接の子要素でなければなりません。これは、子孫結合子が1つ目のセレクターに一致する要素が祖先に存在する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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
Child combinator (A > B)Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 7Opera 完全対応 ありSafari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報