CSSコンビネータ
CSSコンビネータ
コンビネータは、セレクター間の関係を説明するものです。
CSSセレクターには、複数の単純なセレクターを含めることができます。単純なセレクターの間に、コンビネーターを含めることができます。
CSSには4つの異なるコンビネータがあります。
- 子孫セレクター（スペース）
- 子セレクター（>）
- 隣接する兄弟セレクター（+）
- 一般的な兄弟セレクター（〜）
子孫セレクター
子孫セレクターは、指定された要素の子孫であるすべての要素と一致します。
次の例では、<div>要素内のすべての<p>要素を選択します。
例
div p {
background-color: yellow;
}
子セレクター（>）
子セレクターは、指定された要素の子であるすべての要素を選択します。
次の例では、<div>要素の子であるすべての<p>要素を選択します。
例
div > p {
background-color: yellow;
}
隣接する兄弟セレクター（+）
隣接する兄弟セレクターは、別の特定の要素の直後にある要素を選択するために使用されます。
兄弟要素は同じ親要素を持っている必要があり、「隣接する」は「すぐに続く」ことを意味します。
次の例では、<div>要素の直後に配置される最初の<p>要素を選択します。
例
div + p {
background-color: yellow;
}
一般的な兄弟セレクター（〜）
一般的な兄弟セレクターは、指定された要素の次の兄弟であるすべての要素を選択します。
次の例では、<div>要素の次の兄弟であるすべての<p>要素を選択します。
例
div ~ p {
background-color: yellow;
}
すべてのCSSコンビネータセレクター
| Selector | Example | Example description |
|---|---|---|
| element element | div p | Selects all <p> elements inside <div> elements |
| element>element | div > p | Selects all <p> elements where the parent is a <div> element |
| element+element | div + p | Selects the first <p> element that are placed immediately after <div> elements |
| element1~element2 | p ~ ul | Selects every <ul> element that are preceded by a <p> element |