CSS セレクター実践: 隣接兄弟結合子で要素を正確に狙い撃つ

css + 隣接

この記事では、CSS を使って隣接する要素を選択するための強力なツール、隣接兄弟結合子（Adjacent Sibling Combinator）について詳しく解説します。基本的な文法から実際の使用例まで、このセレクターの力を最大限に引き出す方法を学びましょう。

1. 隣接兄弟結合子: 精密なターゲティングを実現する武器

隣接兄弟結合子は、指定した要素の直後に続く最初の兄弟要素を選択するためのものです。

隣接兄弟結合子の文法は非常にシンプルです。


要素1 + 要素2

ここで重要なのは、"要素1" と "要素2" は必ず同じ親要素の子要素である必要がある点です。

隣接兄弟結合子を使うと、マウスホバー時に現在のナビゲーション項目とその隣接項目をハイライト表示する効果を簡単に実装できます。


<nav>
  <ul>
    <li>ホーム</li>
    <li>サービス</li>
    <li>ブログ</li>
    <li>お問い合わせ</li>
  </ul>
</nav>


nav li:hover + li {
  background-color: #f0f0f0; /* 背景色を変更 */
}

隣接兄弟結合子を使用すると、フォームの入力欄にフォーカスが当たった時に、隣接する要素に補足情報を表示することができます。


<label for="email">メールアドレス:</label>
<input type="email" id="email">
<span class="hint">正しいメールアドレスを入力してください。</span>


input:focus + .hint {
  display: inline-block; /* ヒントを表示 */
}

.hint {
  display: none; /* 初期状態では非表示 */
}

兄弟結合子 (~) は、指定した要素の後に続くすべての兄弟要素を選択します。隣接兄弟結合子 (+) との違いは、"直後" か "すべて" かという点です。

子結合子 (>) は、指定した要素の直接の子要素を選択します。兄弟要素ではなく親子関係にある要素を選択する点が異なります。

隣接兄弟結合子は、CSS で要素をピンポイントに選択するための強力なツールです。特に、隣接する要素にスタイルを適用する場合に非常に便利です。今回紹介した活用例を参考に、ぜひ皆さんのプロジェクトでも活用してみてください。

A1: いいえ、適用できません。隣接兄弟結合子は、同じ親要素を持つ兄弟要素同士にのみ適用されます。

A2: いいえ、できません。隣接兄弟結合子は、直後に続く最初の兄弟要素のみを選択します。2 つ以上離れた要素を選択する場合は、他のセレクターと組み合わせる必要があります。

A3: はい、主要なモダンブラウザではすべてサポートされています。ただし、古いブラウザの中にはサポートしていないものもあるため、注意が必要です。caniuse.com などのウェブサイトで、各ブラウザのサポート状況を確認することができます。