結合子には下記のように４種類あります。
| セレクタ名 | 記述方法 | 説明 |
|---|---|---|
| 子孫セレクタ | A B | A要素より下の階層にあるB要素 |
| 子セレクタ（直下セレクタ） | A>B | A要素の１階層下のB要素 |
| 隣接兄弟セレクタ（隣接セレクタ） | A+B | A要素の直後の同階層のB要素 |
| 一般兄弟セレクタ（間接セレクタ） | A~B | A要素より後ろにある同階層のB要素 |
1つずつ解説します。
子孫セレクタ「A B」
A要素より下の階層にあるB要素
HTMLサンプル
<main>
<p>1階層目<p>
<div>
<p>2階層目<p>
<div>
<p>3階層目<p>
</div>
</div>
</main>
<p>同階層<p>
<p>同階層<p>cssの指定
main p {
color: red;
}結果
１階層目
２階層目
３階層目
同階層
同階層
子セレクタ（直下セレクタ） 「A > B」
A要素の１階層下のB要素
HTMLサンプル
<main>
<p>1階層目<p>
<div>
<p>2階層目<p>
<div>
<p>3階層目<p>
</div>
</div>
</main>
<p>同階層<p>
<p>同階層<p>cssの指定
main > p {
color: red;
}結果
１階層目
２階層目
３階層目
同階層
同階層
隣接兄弟セレクタ（隣接セレクタ） 「A + B」
A要素の直後の同階層のB要素
HTMLサンプル
<main>
<p>1階層目<p>
<div>
<p>2階層目<p>
<div>
<p>3階層目<p>
</div>
</div>
</main>
<p>同階層<p>
<p>同階層<p>cssの指定
main + p {
color: red;
}結果
１階層目
２階層目
３階層目
同階層
同階層
一般兄弟セレクタ（間接セレクタ） 「A ~ B」
A要素より後ろにある同階層のB要素
HTMLサンプル
<main>
<p>1階層目<p>
<div>
<p>2階層目<p>
<div>
<p>3階層目<p>
</div>
</div>
</main>
<p>同階層<p>
<p>同階層<p>cssの指定
main ～ p {
color: red;
}結果
１階層目
２階層目
３階層目
同階層
同階層
