Css子孫コンビネータの例
Css Descendant Combinator Example
NS 子孫コンビネータ —通常は単一のスペース（）文字で表されます— 2つのセレクターを組み合わせて、最初のセレクターに一致する祖先（親、親の親、親の親の親など）要素がある場合に2番目のセレクターに一致する要素が選択されるようにします。子孫コンビネータを利用するセレクターは、子孫セレクターと呼ばれます。
/* List items that are descendants of the 'my-things' list */ ul.my-things li { margin: 2em; }
子孫コンビネータは技術的には1つ以上です CSS 別のコンビネーターがない場合の2つのセレクター間の空白文字（スペース文字および/または4つの制御文字（キャリッジリターン、フォームフィード、改行、タブ文字）のいずれか）。さらに、コンビネータを構成する空白文字には、CSSコメントをいくつでも含めることができます。
構文
selector1 selector2 { /* property declarations */ }
例
CSS
li { list-style-type: disc; } li li { list-style-type: circle; }
HTML
<ul> <li> <div>Item 1div> <ul> <li>Subitem Ali> <li>Subitem Bli> ul> li> <li> <div>Item 2div> <ul> <li>Subitem Ali> <li>Subitem Bli> ul> li> ul>
結果
仕様
| 仕様 | 状態 | コメント |
|---|---|---|
| セレクターレベル4 その仕様における「子孫コンビネータ」の定義。 | ワーキングドラフト | |
| セレクターレベル3 その仕様における「子孫コンビネータ」の定義。 | おすすめ | |
| CSSレベル2（リビジョン1） その仕様における「子孫セレクター」の定義。 | おすすめ | |
| CSSレベル1 その仕様における「コンテキストセレクター」の定義。 | おすすめ | 初期定義 |
ブラウザの互換性
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| クロム | 角 | Firefox | インターネットエクスプローラ | オペラ | サファリ | WebView Android | Chrome Android | Android版Firefox | Opera Android | IOS上のSafari | サムスンインターネット | |
Descendant_combinator | 1 61>>>はこのセレクターのエイリアスです 「シャドウピアス子孫コンビネータ」としての使用が廃止されたため 。 | 12 | 1 | 3 | 3.5 | 1 | ≤3761>>>はこのセレクターのエイリアスです 「シャドウピアス子孫コンビネータ」としての使用が廃止されたため 。 | 18 61>>>はこのセレクターのエイリアスです 「シャドウピアス子孫コンビネータ」としての使用が廃止されたため 。 | 4 | 10.1 | 1 | 1.0 8.0>>>はこのセレクターのエイリアスです 「シャドウピアス子孫コンビネータ」としての使用が廃止されたため 。 |
two_greater_than_syntax | 番号 | 番号 | 番号 | 番号 | 番号 | 10-11.1 | 番号 | 番号 | 番号 | 番号 | 10-11.3 | 番号 |