CSSの様々な結合子について(combinators）
CSS コンビネーター
コンビネータは、セレクタ間の関係を説明するものです。
CSSセレクターには、複数の単純なセレクターを含めることができます。単純なセレクターの間に、コンビネーターを含めることができます。
CSSには4つの異なるコンビネータがあります。
- 子孫セレクター(スペース)
- 子セレクター(>)
- 隣接兄弟セレクター(+)
- 一般的な兄弟セレクター(~)
子孫セレクター
子孫セレクターは、指定された要素の子孫であるすべての要素に一致します。
次の例では、 <div>要素内のすべての<p>要素を選択します。
子セレクター(>)
子セレクターは、指定された要素の子であるすべての要素を選択します。
次の例では、 <div>要素の子であるすべての<p>要素を選択します。
隣接兄弟セレクター(+)
隣接兄弟セレクターは、別の特定の要素の直後にある要素を選択するために使用されます。
兄弟要素は同じ親要素を持つ必要があり、「隣接」とは「すぐ後に続く」ことを意味します。
次の例では、<div>要素の直後に配置された最初の<p>要素を選択します。
一般的な兄弟セレクター(~)
一般的な兄弟セレクターは、指定された要素の次の兄弟であるすべての要素を選択します。
次の例では、 <div>要素の次の兄弟であるすべての<p>要素を選択します。
すべてのCSSコンビネーターセレクター
|
セレクタ |
例 |
例の説明 |
|---|---|---|
| element element | div p | <div>要素内のすべての<p>要素を選択します。 |
| element > element | div > p | 親が<div>要素であるすべての<p>要素を選択します。 |
| element + element | div + p | <div>要素の直後に配置された最初の<p>要素を選択します。 |
| element1 ~ element2 | p ~ ul | <p>要素が先行するすべての<ul>要素を選択します。 |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。