CSS サブセレクトコンバイナ入門：詳細解説とサンプルコード

構文

サブセレクトコンバイナの構文は次のとおりです。

A + B

ここで、

B は、A の後に続く兄弟要素を表すセレクタです。
A は、選択する最初の要素を表すセレクタです。

例

次の例では、h1 見出しの後に続く p 段落要素を選択します。

h1 + p {
  color: red;
}

このコードは、HTML ドキュメント内のすべての h1 見出しの後に続く p 段落要素の色を赤色に設定します。

サブセレクトコンバイナの利点

サブセレクトコンバイナを使用すると、次の利点があります。

特定の要素の後に続く兄弟要素のみを選択できます。
HTML 構造に依存せずに要素を選択できます。

サブセレクトコンバイナの注意点

サブセレクトコンバイナを使用する際には、次の点に注意する必要があります。

A と B が同じ要素の場合は、サブセレクトコンバイナは機能しません。
A と B の間に改行がある場合は、サブセレクトコンバイナは機能しません。

サブセレクトコンバイナの代替手段

サブセレクトコンバイナを使用する代わりに、次の方法を使用することもできます。

JavaScript を使用する。
:nth-of-type() セレクタを使用する。
nth-child() セレクタを使用する。

h1 + p {
  background-color: red;
}

例 2: 特定の要素の後に続く兄弟要素のテキストを太字にする

この例では、li 要素の後に続く li 要素のテキストを太字にします。

li + li {
  font-weight: bold;
}

例 3: 特定の要素の後に続く兄弟要素にクラスを追加する

この例では、img 要素の後に続く p 段落要素に highlight クラスを追加します。

img + p {
  class: highlight;
}

例 4: 特定の要素の後に続く兄弟要素の属性を操作する

この例では、a 要素の後に続く img 要素の src 属性を image2.jpg に変更します。

a + img {
  src: image2.jpg;
}

例 5: 特定の要素の後に続くすべての兄弟要素を選択する

この例では、h2 見出しの後に続くすべての兄弟要素を選択します。

h2 + * {
  /* ... */
}

これらの例は、サブセレクトコンバイナを使用して要素を選択し、スタイルを適用する方法を示しています。サブセレクトコンバイナは、CSS で要素を柔軟かつ効率的に選択するための強力なツールです。

サブセレクトコンバイナは、パフォーマンスに影響を与える可能性があることに注意してください。
サブセレクトコンバイナを他のセレクタと組み合わせて使用することもできます。
上記の例は、疑似クラスや擬似要素を含むことができます。

方法 1: nth-child() セレクタを使用する

nth-child() セレクタは、要素の親要素内のインデックスに基づいて要素を選択するのに役立ちます。サブセレクトコンバイナと同様に、nth-child() セレクタを使用して、特定の要素の後に続く兄弟要素を選択することができます。

例

次の例では、ul 要素内の li 要素の 2 番目 の後に続くすべての li 要素を選択します。

ul li:nth-child(2n + 1) + li {
  /* ... */
}

方法 2: :nth-of-type() セレクタを使用する

nth-of-type() セレクタは、要素の種類に基づいて要素を選択するのに役立ちます。サブセレクトコンバイナと同様に、nth-of-type() セレクタを使用して、特定の要素の後に続く兄弟要素を選択することができます。

例

次の例では、div 要素内の p 段落要素の 2 番目 の後に続くすべての p 段落要素を選択します。

div p:nth-of-type(2n + 1) + p {
  /* ... */
}

方法 3: JavaScript を使用する

JavaScript を使用して、特定の要素の後に続く兄弟要素を動的に選択することもできます。

例

次の例は、JavaScript を使用して、h1 見出しの後に続くすべての p 段落要素に赤い背景色を設定する方法を示しています。

const headings = document.querySelectorAll('h1');

headings.forEach(heading => {
  const paragraphs = heading.nextElementSibling;
  paragraphs.style.backgroundColor = 'red';
});

方法	利点	欠点
サブセレクトコンバイナ	シンプルでわかりやすい	パフォーマンスに影響を与える可能性がある
`nth-child()` セレクタ	柔軟性が高い	複雑でわかりにくい可能性がある
`nth-of-type()` セレクタ	特定の種類の要素を選択するのに適している	複雑でわかりにくい可能性がある
JavaScript	柔軟性と制御性に優れている	コード量が多くなる可能性がある