CSS の セレクタの区切り文字として始まった 結合子 が 結合子と呼ばれるまで

CSSの解説記事を読んでいると 子孫セレクタ と呼んだり、子孫結合子と呼んだりしているのを見ます。

ただ、MDN では 子孫結合子です。

https://developer.mozilla.org/ja/docs/Web/CSS/Child_combinator

https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Styling_basics/Combinators

何故そういう呼び名に差が出ているのかを確認していくために原典を調査しました。

## Cascading Style Sheets, level 1

勧告: 1997/12/17

https://www.w3.org/TR/CSS1/#contextual-selectors

> ### 1.6    Contextual selectors
> ...
> Contextual selectors consist of several simple selectors separated by whitespace (all selectors described up to now have been simple selectors).
> ...

CSS1 段階では結合子という概念は無い。 子孫の区切り文字として ホワイトスペース を指定していた。 現在のニュアンスでいうところの 子孫結合子 しか無い

結合子込みで コンテキスト セレクターと呼んでいた。

##  Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

勧告: 2011/06/07

https://www.w3.org/TR/CSS2/selector.html#pattern-matching

> ### 5.1 Pattern matching
> ...
> | **Pattern** |  **Meaning** | **Described in section** |
> | - | - | -
> | E F | Matches any F element that is a descendant of an E element. | [Descendant selectors](https://www.w3.org/TR/CSS2/selector.html#descendant-selectors) |
> | E > F | Matches any F element that is a child of an element E. | [Child selectors](https://www.w3.org/TR/CSS2/selector.html#child-selectors) |
> | E + F | Matches any F element immediately preceded by a sibling element E. | [Adjacent selectors](https://www.w3.org/TR/CSS2/selector.html#adjacent-selectors) |

CSS2 段階では 子セレクタ の様な名称を使っている

https://www.w3.org/TR/CSS2/selector.html#selector-syntax

> ### 5.2 Selector syntax
> ...
> A selector is a chain of one or more simple selectors separated by combinators. Combinators are: white space, ">", and "+". White space may appear between a combinator and the simple selectors around it.
> ...

結合子（コンビネータ）という単語は出ているものの 名称はセレクタである。

https://www.w3.org/TR/CSS22/selector.html#pattern-matching

CSS 2.2 でも同様

## Selectors Level 3
勧告: 2018/11/06 

https://www.w3.org/TR/selectors-3/#selectors

> ### 2. Selectors
> ...
> | Pattern | Represents | Description | Level |
> | - | - | - | - |
> | E F | an F element descendant of an E element | [Descendant combinator](https://www.w3.org/TR/selectors-3/#descendant-combinators) | 1 |
> | E > F | an F element child of an E element | [Child combinator](https://www.w3.org/TR/selectors-3/#child-combinators) | 2 |
> | E + F | an F element immediately preceded by an E element | [Next-sibling combinator](https://www.w3.org/TR/selectors-3/#adjacent-sibling-combinators) | 2 |
> | E ~ F | an F element preceded by an E element | [Subsequent-sibling combinator](https://www.w3.org/TR/selectors-3/#general-sibling-combinators) | 3 |
> 
> ...

https://www.w3.org/TR/selectors-3/#selector-syntax

> ### 4. Selector syntax
> ...
> **Combinators** are: whitespace, "greater-than sign" (U+003E, >), "plus sign" (U+002B, +) and "tilde" (U+007E, ~). White space may appear between a combinator and the simple selectors around it. Only the characters "space" (U+0020), "tab" (U+0009), "line feed" (U+000A), "carriage return" (U+000D), and "form feed" (U+000C) can occur in whitespace. Other space-like characters, such as "em-space" (U+2003) and "ideographic space" (U+3000), are never part of whitespace.
> ...

結合子（コンビネータ） として定義されている

https://www.w3.org/TR/selectors-3/#combinators

> ### 8. Combinators

CSS Level3 で 子セレクタ → 子結合子（コンビネータ） に名称変更している

# まとめ

- CSS1 (`1997/12/17`)
    - 結合子という 概念が無い 区切り文字としてのホワイトスペース(子孫結合子)
- CSS 2.1 ( `2011/06/07` )
    - 結合子という概念はある
    - ただ、それぞれの名称は ○○セレクタ 形式
- CSS 3 ( `2018/11/06` )
    - それぞれの結合子 の名称が 〇〇結合子（コンビネータ）となる

その為、現時点で 子孫セレクタ 等の 結合子をセレクタとして呼称している記事は古いソースを参考としている記事の可能性がとても高い

以上！