CSS コンビネータ

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

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

子孫セレクタ（スペース）

子孫セレクタは、指定された要素の子孫であるすべての要素にマッチします。

div p {
  background-color: yellow;
}

子セレクタ（>）

子セレクタは、指定された要素の子であるすべての要素を選択します。

div > p {
  background-color: yellow;
}

隣接する兄弟セレクタ（+）

隣接する兄弟セレクタは、特定の要素の直後に配置されている要素を選択します。

div + p {
  background-color: yellow;
}

一般の兄弟セレクタ（~）

一般の兄弟セレクタは、指定された要素の次の兄弟すべての要素を選択します。

div ~ p {
  background-color: yellow;
}

すべてのCSSコンビネータセレクタ

セレクタ	例	例の説明
要素 要素	div p	<div> 要素内のすべての <p> 要素を選択します
要素>要素	div > p	親が <div> 要素であるすべての <p> 要素を選択します
要素+要素	div + p	<div> 要素の直後に配置されている最初の <p> 要素を選択します
要素1~要素2	p ~ ul	<p> 要素の直前に配置されているすべての <ul> 要素を選択します