子孫結合子 (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 の定義
勧告 初回定義

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1121 あり あり あり
A >> B syntax なし なし なし なし なし10
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり4 あり あり あり
A >> B syntax なし なし なし なし なし10 なし

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

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