CSS 速習チュートリアル

CSS コンビネータ

1. CSS コンビネータとは

コンビネータ（Combinator）とは、セレクタ同士の関係を説明する記号のことです。

CSS セレクタには複数の単純なセレクタを含めることができます。それらのセレクタの間にコンビネータを配置することで、特定の要素間の関係性に基づいたターゲット指定が可能になります。

CSS3 には、以下の 4 種類のコンビネータが存在します。

  • 子孫セレクタ (空白)
  • 子セレクタ ( > )
  • 隣接兄弟セレクタ ( + )
  • 一般兄弟セレクタ ( ~ )

2. 子孫セレクタ (Descendant Selector)

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

以下の例では、 <div> 要素内にあるすべての <p> 要素を選択します。

div p {
  background-color: yellow;
}

2.1 実装例

<!DOCTYPE html>
<html>
<head>
<style>
/* divの中にあるすべてのp要素を黄色にします */
div p {
  background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section><p>Paragraph 3 in the div.</p></section>
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>

3. 子セレクタ (Child Selector)

子セレクタ（ > ）は、指定した要素の直下の子要素であるすべての要素を選択します。

以下の例では、 <div> 要素の直下にあるすべての <p> 要素を選択します。

div > p {
  background-color: yellow;
}

3.1 実装例

<!DOCTYPE html>
<html>
<head>
<style>
/* divの直下にあるp要素のみを選択します */
div > p {
  background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section>
    <p>Paragraph 3 in the div.</p>
  </section>
</div>

<p>Paragraph 4. Not in a div.</p>

</body>
</html>

4. 隣接兄弟セレクタ (Adjacent Sibling Selector)

隣接兄弟セレクタ（ + ）は、指定した要素の直後に配置されている要素を選択するために使用されます。

兄弟要素は同じ親要素を持つ必要があり、「隣接」とは「直後」であることを意味します。

以下の例では、 <div> 要素のすぐ後に続く最初の <p> 要素を選択します。

div + p {
  background-color: yellow;
}

4.1 実装例

<!DOCTYPE html>
<html>
<head>
<style>
/* divの直後にある最初のp要素を選択します */
div + p {
  background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
</div>

<p>Paragraph 2. After the div!</p>
<p>Paragraph 3. Also after the div (but not immediately).</p>

</body>
</html>

5. 一般兄弟セレクタ (General Sibling Selector)

一般兄弟セレクタ（ ~ ）は、指定した要素の後ろにあるすべての兄弟要素を選択します。

以下の例では、 <div> 要素の後ろにあるすべての <p> 要素を選択します。

div ~ p {
  background-color: yellow;
}

5.1 実装例

<!DOCTYPE html>
<html>
<head>
<style>
/* divと同じ階層にあり、かつdivの後ろにあるすべてのp要素を選択します */
div ~ p {
  background-color: yellow;
}
</style>
</head>
<body>

<p>Paragraph 1 (Before the div).</p>

<div>
  <p>Paragraph 2 (Inside the div).</p>
</div>

<p>Paragraph 3 (After the div).</p>
<code>Some code.</code>
<p>Paragraph 4 (After the div).</p>

</body>
</html>

6. CSS コンビネータ リファレンス

コンビネータ名前説明
element element子孫セレクタ要素内にあるすべての指定要素を選択
element > element子セレクタ要素の直下にある指定の子要素を選択
element + element隣接兄弟セレクタ要素の直後に続く最初の指定要素を選択
element ~ element一般兄弟セレクタ要素の後ろにあるすべての指定の兄弟要素を選択