CSS コンビネータs

CSS コンビネータ

コンビネータは、セレクタの間の関係を説明するものです。

CSS セレクタには、複数の単純なセレクタを含むことができます。単純なセレクタの間に、コンビネータを含めることができます。

CSS3 には、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;
}