[4] [[結合子]]は、[[選択子]]の中にあって[[単純選択子列]]同士を区切るものであり、
[[単純選択子列]]によって一致させる[[要素]]同士の関係を指定するものです。

* 仕様書

[REFS[
- [7] [CITE@en[Selectors Level 3]] 
-- [3] <http://www.w3.org/TR/selectors/#combinators0>
-- [8] '''<http://www.w3.org/TR/selectors/#combinators>'''
]REFS]

* 結合子の種類

[5] [[結合子]]には次の種類があります [SRC[>>3]]。
- [[空白]] : [[子孫結合子]]
- [CODE(CSS)[[[>]]]] : [[子供結合子]]
- [CODE(CSS)[[[+]]]] : [[隣接兄弟結合子]]
- [CODE(CSS)[[[~]]]] : [[一般兄弟結合子]]

* 構文

[6] [[結合子]]と[[単純選択子列]]の間には[[空白]]を挿入できます [SRC[>>3]]。

[1]
[[単純選択子列]]の間に[[空白]]の代わりに[[注釈]]を入れると、
[[Firefox]] 2 や [[Opera]] 9 では不正な[[選択子群]]として無視されますが、
[[WinIE 6]] は[[子孫]][[結合子]]として扱うようです。

;; <https://suika.suikawiki.org/gate/2007/cssom/viewer?c=a%2F**%2Fb%20%20%7B%0A%20%20color%3A%20red%3B%0A%7D;h=%3Cp%3EAAAA%3C%2Fa%3E;p=n;x=style-element>

([[名無しさん]])


[2]
>>1 [[CSS 2]] や [[CSS 2.1]] の本文や [[CSS 2.1]] の[[文法]]では[[空白]]が必要とされていました

;; <IW:CSS2:"selector.html#descendant-selectors">

が、 [[CSS 2]] の[[文法]]では[[空]]でもよい (= [[注釈]]だけでよい)
という矛盾した記述がなされていました。

;; <IW:CSS2:"grammar.html#q1">

* 妥当性

[9] [[結合子]]は、構文的に正しくなければ[[非妥当]]です。

* 歴史

** CSS2

[11] [[CSS2]] では[[子孫結合子]]、[[子供結合子]]、[[直接兄弟結合子]]が定義されていました。

[REFS[
- [10] [CITE@en[Selectors]] ([TIME[2011-06-07 22:09:52 +09:00]] 版) <http://www.w3.org/TR/CSS2/selector.html#combinator>
]REFS]

** 選択子3

[12] [[選択子3]]では[[間接兄弟結合子]]が追加されました。