コンビネーター(結合子)

コンビネーター(結合子)は、要素と要素の位置関係によって指定するセレクターである。

1. 子孫結合子(Descendant combinator) selector1 selector2

子孫結合子(Descendant combinator)は、selector1に含まれる全てのselector2を指定する。

1-1. ソースコードの例

selector1 selector2 {
   property: value;
}

ul li {
   property: value;
}

1-2. 説明

特になし。

2. 子結合子(Child combinator) selector1 > selector2

子結合子(Child combinator)は、selector1に含まれる直下のみのselector2を指定する。

2-1. ソースコードの例

selector1 > selector2 {
   property: value;
}

ul > li {
   property: value;
}

2-2. 説明

特になし。

3. 一般兄弟結合子(General sibling combinator) selector1 ~ selector2

一般兄弟結合子(General sibling combinator)は、selector1とselector2が同じ親要素を持っている状態で、selector1に並ぶ全てのselector2を指定する。？曖昧

3-1. ソースコードの例

selector1 ~ selector2 {
   property: value;
}

ul ~ li {
   property: value;
}

3-2. 説明

特になし。

4. 隣接兄弟結合子(Adjacent sibling combinator) selector1 + selector2

兄弟

隣接兄弟結合子(Adjacent sibling combinator)は、selector1とselector2が同じ親要素を持っている状態で、selector1の直後に並ぶselector2を指定する。？曖昧

4-1. ソースコードの例

selector1 + selector2 {
   property: value;
}

ul + li {
   property: value;
}

4-2. 説明

特になし。

備考 Column combinator 列結合子と呼ばれる実験的なやつは対応なしなので扱わない

ul || li {
   property: value;
}

名前を"subsequent-sibling combinator"に変更

隣接兄弟(Adjacent sibling)結合子 p + a (仕様ではNext-sibling combinator)

一般兄弟(General sibling)結合子 p ~ a (仕様ではSubsequent-sibling combinator)

5. KnotTextでのCSSの分類

参考：CSS reference - CSS | MDN