CSS コンビネーター

CSS コンビネーター（Combinators / 結合子）は、セレクター間の関係を定義するもので、開発者がドキュメントの DOM 構造に基づいて要素を正確に特定することを可能にします。

特定の記号を使用することで、要素のスタイルの継承と階層関係を効率的に制御でき、すべての要素に過剰なクラス名を割り当てる手間を省くことができます。

1. 子孫セレクター

子孫セレクターは、結合子として半角スペース（ ）を使用し、指定された要素の内部にあるすべての後代要素を選択します。ネスト（入れ子）の深さは関係ありません。

構文： A B { ... }

役割： すべての A 要素の内部にある B 要素を選択。

/* div 内のすべての p タグを選択（階層の深さは問わない） */
div p {
  color: blue;
}

2. 子セレクター

子セレクターは、結合子として不等号（>）を使用し、指定された要素の直下にある子要素のみを選択します。孫要素やそれ以降の深い階層の要素には影響しません。

構文： A > B { ... }

役割： A の第1階層の子要素である B のみを選択。

/* div の直下にある第1階層の p タグのみを選択 */
div > p {
  font-weight: bold;
}

3. 隣接兄弟セレクター

隣接兄弟セレクターは、結合子としてプラス記号（+）を使用し、指定された要素のすぐ直後に続く最初の兄弟要素を選択します。その要素の後に該当する兄弟要素がない場合は適用されません。

構文： A + B { ... }

役割： A の直後に続く最初の同階層の B 要素を選択。

/* h1 の直後に続く最初の p タグを選択 */
h1 + p {
  margin-top: 0;
}

4. 一般兄弟セレクター

一般兄弟セレクターは、結合子としてチルダ記号（~）を使用し、指定された要素より後ろにあるすべての兄弟要素を選択します（間に他の要素が挟まっていても対象となります）。

構文： A ~ B { ... }

役割： A 以降に現れるすべての同階層の B 要素を選択。

/* h1 より後ろにあるすべての同階層の p タグを選択 */
h1 ~ p {
  color: gray;
}

5. 核心的な違いのまとめ

6. 開発におけるベストプラクティス

• パフォーマンスの考慮： ブラウザのセレクター解析エンジンは非常に最適化されていますが、過度に深い組み合わせ（例：div ul li a span）は避け、CSS の可読性とメンテナンス効率を高めるべきです。
• 詳細度（Specificity）の管理： コンビネーターを使用すると、セレクターのウェイト（詳細度）が増加します。複雑なセレクターを使用してスタイルが反映されない場合は、より詳細度の高い ID やクラスセレクターに上書きされていないか優先的に確認してください。
• セマンティクス（意味論）とクラスの優先： DOM 構造がわずかに変更されただけでスタイルが崩れるのを防ぐため、複雑すぎる階層関係に依存するのではなく、可能な限りクラス名（Class）を活用して要素を特定しましょう。
• 隣接セレクターの賢い利用： + セレクターは、レイアウトの余白管理に非常に適しています（例：button + button { margin-left: 10px; }）。これは、すべてのボタンに手動でマージン用のクラスを追加するよりも遥かにエレガントな解決策です。