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