Edit

Page

Page title:

Page body:

[1] [[単純選択子列]]の間に[[空白]]だけを置くことによって表現される[DFN[[RUBYB[[[子孫結合子]]]@en[descendant combinator]]]]は、
前の[[単純選択子列]]によって表される[[要素]]の'''[[子孫]]'''であって後の[[単純選択子列]]で表される[[要素]]を表す[[結合子]]です。

* 仕様書

[REFS[
- [2] [CITE@en[Selectors Level 3]] ([TIME[2011-09-29 22:16:17 +09:00]] 版) <http://www.w3.org/TR/selectors/#descendant-combinators>
]REFS]

* 歴史

** 草創期

[REFS[
- [19] [CITE[Cascading Style Sheets: a draft specification]] ([TIME[1995-05-31 21:05:57 +09:00]] 版) <http://www.w3.org/Style/CSS/draft1.html#document-wide>
- [18] [CITE[Cascading Style Sheets: a draft specification]] ([TIME[1995-07-05 16:06:10 +09:00]] 版) <http://www.w3.org/Style/CSS/draft2.html#context>
- [17] [CITE[Cascading Style Sheets: a draft specification]] ([TIME[1995-08-11 17:13:22 +09:00]] 版) <http://www.w3.org/Style/CSS/draft3.html#introduction1>
- [21] [CITE[Cascading Style Sheets, level 1]] ([TIME[1995-11-18 13:20:39 +09:00]] 版) <http://www.w3.org/Style/CSS/draft6.html#context>
]REFS]

[20] >>19 や >>18 は現在の[[子孫結合子]]と同様の構文ですが、 >>17 以降の案では[[先祖]]の方を
[CODE(CSS)[(]] と [CODE(CSS)[)]] で括る構文になっています。

[22] >>21 では [[CSS1]] に含まれるものの optional とされています。

** CSS1

[REFS[
- [23] [CITE[Cascading Style Sheets, level 1]] ([TIME[1999-02-05 02:57:01 +09:00]] 版) <http://www.w3.org/TR/WD-css1-951209.html#context>
- [26] [CITE[Cascading Style Sheets, level 1]] ([TIME[1999-02-05 02:41:01 +09:00]] 版) <http://www.w3.org/TR/WD-css1-960220.html#context-sensitive-selectors>
- [25] [CITE[Cascading Style Sheets, level 1]] ([TIME[2000-09-23 08:23:45 +09:00]] 版) <http://www.w3.org/TR/WD-css1-960726.html#contextual-selectors>
- [9] [CITE[Cascading Style Sheets, level 1]] ([TIME[2008-04-10 02:23:32 +09:00]] 版) <http://www.w3.org/TR/CSS1/#contextual-selectors>
]REFS]

[24] >>23 で >>20 の構文から、現在の構文に変わりました。
>>25 までには用語も[[文脈的選択子]]に変わっています。

;; [10] この頃は[[結合子]]という概念はなく、[[文脈的選択子]]の機能として[[子孫結合子]]に相当するものが説明されていました。

** CSS2

[REFS[
- [15] [CITE@en[Selectors]] ([TIME[2001-01-16 00:22:58 +09:00]] 版) <http://www.w3.org/TR/1998/WD-css2-19980128/selector.html#descendant-selectors>
-[6] [CITE@en[Selectors]] ([TIME[2011-06-07 22:09:52 +09:00]] 版) <http://www.w3.org/TR/CSS2/selector.html#descendant-selectors>
]REFS]

[11] [[CSS2]] で[[結合子]]という概念が導入され、他に[[子孫結合子]]や[[隣接兄弟結合子]]が追加されました。

;; [16] 初出は >>15 で、その前は [[CSS1]] 風の定義でした。

[7] [[CSS2]] は[[単純選択子列]] ([[CSS2]] でいう[[単純選択子]]) の後に[[子孫結合子]]が続き、
更に[[単純選択子列]]が並ぶ列のことを[[子孫選択子]]と呼んでいました。

;; [8] この用語は[[選択子3]]では使われていません。

** 選択子3

[12] [[選択子3]]では特に変更はありませんでした。

** XBL2

[REFS[
- [13] [CITE@en-US[XBL 2.0]] ([TIME[2010-09-03 10:10:02 +09:00]] 版) <http://dev.w3.org/2006/xbl2/Overview.html#selectors-and-shadow-scopes>
]REFS]

[14] [[XBL2]] は[[影木]]との関係を規定していました。

* 例

[EG[
[3] 例えば[[選択子]]
[PRE(CSS example code)[
h1 em
]PRE]
... は、 [CODE(HTMLe)@en[h1]] [[要素]]の[[子孫]] ([[子要素]]、[[孫要素]]、...)
である [CODE(HTMLe)@en[em]] [[要素]]を表します。

[4] [[子孫]]はあくまで1つの[[文書木]]の中での関係なので、例えば [CODE(HTMLe)@en[h1]]
[[要素]]の[[子孫]]に [CODE(HTMLe)@en[[[iframe]]]]
[[要素]]があってそこに含まれる[[文書]]に [CODE(HTMLe)@en[em]] [[要素]]があったとしても、
それはこの[[選択子]]とは一致しません。
]EG]

* 関連

[5] [[子供結合子]]は[[孫要素]]以下ではなく[[子要素]]にだけ一致させたい時に使うことができます。

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)