子孫結合子 (descendant combinator) ― 通常は単一の空白文字 ( ) で表される ― は2つの CSS セレクターを結合し、1つ目のセレクターに一致する要素の子孫のうち、2つ目のセレクターに一致する要素を選択します。子孫結合子を利用したセレクターは子孫セレクターと呼ばれます。

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

子孫結合子は、技術的には他の結合子がない2つのセレクターの間にある1つ以上の CSS ホワイトスペース文字 ― 空白文字や4種類の制御文字(復帰、ページ送り、改行、タブ文字)のうちの1つ ― です。さらに、結合子としてのホワイトスペース文字には任意の数の CSS コメントを含めることができます。

この結合子の抽象的な性質は、他の標準化された結合子とは異なります。他の結合子はすべて、明確な有限の文字の並びで表現されるからです。この矛盾は、機能が似ている子結合子と特に似た形になる、2つの大なり記号の文字の並び (>>) で表される冗長な子孫結合子を追加することで解決されます。

構文

セレクター1 セレクター2 { /* プロパティ宣言 */ }
セレクター1 >> セレクター2 { /* プロパティ宣言 */ }

CSS

li {
  list-style-type: disc;
}

li li {
  list-style-type: circle;
}

HTML

<ul>
  <li>
    <div>Item 1</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
  <li>
    <div>Item 2</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
</ul>

結果

仕様書

仕様書 策定状況 コメント
Selectors Level 4
descendant combinator の定義
草案 子孫結合子にホワイトスペースに加えて >> を導入。
Selectors Level 3
descendant combinator の定義
勧告  
CSS Level 2 (Revision 1)
descendant selectors の定義
勧告  
CSS Level 1
contextual selectors の定義
勧告 初回定義

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 あり
完全対応 あり
完全対応 61
補足
補足 >>> is aliased to this selector since its use as the 'shadow-piercing descendant combinator' was deprecated.
Edge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 あり
完全対応 あり
完全対応 61
補足
補足 >>> is aliased to this selector since its use as the 'shadow-piercing descendant combinator' was deprecated.
Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
A >> B syntax
非推奨
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 10 — 11.1WebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 10 — 11.1Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。

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

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