子孫結合子 ― 通常は単一の空白文字 (
) で表される ― は2つの CSS セレクターを結合し、1つ目のセレクターに一致する要素の子孫のうち、2つ目のセレクターに一致する要素を選択します。子孫結合子を利用したセレクターは子孫セレクターと呼ばれます。
/* "my-things" リストの子孫のリスト項目 */ ul.my-things li { margin: 2em; }
子孫結合子は、技術的には他の結合子がない2つのセレクターの間にある1つ以上の CSS ホワイトスペース文字 ― 空白文字や4種類の制御文字 (復帰、ページ送り、改行、タブ文字) のうちの1つ ― です。さらに、結合子としてのホワイトスペース文字には任意の数の CSS コメントを含めることができます。
構文
セレクター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 の定義 |
勧告 | 初回定義 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Descendant combinator (A B ) | Chrome
完全対応
1
| Edge 完全対応 12 | Firefox 完全対応 1 | IE 完全対応 3 | Opera 完全対応 あり | Safari 完全対応 1 | WebView Android
完全対応
≤37
| Chrome Android
完全対応
18
| Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 1 | Samsung Internet Android
完全対応
1.0
|
A >> B syntax | Chrome 未対応 なし | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 10 — 11.1 | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android 未対応 なし | Opera Android 未対応 なし | Safari iOS 未対応 10 — 11.3 | Samsung Internet Android 未対応 なし |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 非推奨。新しいウェブサイトでは使用しないでください。
- 非推奨。新しいウェブサイトでは使用しないでください。
- 実装ノートを参照してください。
- 実装ノートを参照してください。