CSSコンビネータ
コンビネータは、セレクタとの関係を説明するものです。 |
CSSセレクタは、複数の単純なセレクタを含めることができます。 単純なセレクタの間、我々はコンビネータを含めることができます。
CSS3の4つの異なるコンビネータがあります。
- 子孫セレクタ(space)
- 子供セレクタ(>)
- 隣接兄弟セレクタ(+)
- 一般兄弟セレクタ(~)
子孫セレクタ
子孫セレクタは、指定された要素の子孫であるすべての要素にマッチします。
次の例では、すべての選択<p>内の要素<div>要素を:
子供セレクタ
子セレクタは、指定された要素の直接の子であるすべての要素を選択します。
次の例では、すべての選択<p>の直接の子である要素<div>要素を:
隣接兄弟セレクタ
隣接兄弟セレクタは、指定された要素の隣接兄弟であるすべての要素を選択します。
兄弟要素は、同じ親要素を有し、「隣接」しなければならない「直後」を意味します。
次の例では、すべての選択<p>の直後に配置されている要素<div>要素を:
一般兄弟セレクタ
一般兄弟セレクタは、指定された要素の兄弟であるすべての要素を選択します。
次の例では、すべての選択<p>の兄弟である要素<div>要素を: