CSS セレクター実践: 隣接兄弟結合子で要素を正確に狙い撃つ
この記事では、CSS を使って隣接する要素を選択するための強力なツール、隣接兄弟結合子（Adjacent Sibling Combinator）について詳しく解説します。基本的な文法から実際の使用例まで、このセレクターの力を最大限に引き出す方法を学びましょう。
1. 隣接兄弟結合子: 精密なターゲティングを実現する武器
1.1 概念解説
隣接兄弟結合子は、指定した要素の直後に続く最初の兄弟要素を選択するためのものです。
1.2 文法規則
隣接兄弟結合子の文法は非常にシンプルです。
要素1 + 要素2
ここで重要なのは、"要素1" と "要素2" は必ず同じ親要素の子要素である必要がある点です。
2. 実践演習: 隣接兄弟結合子の活用シーン
2.1 ナビゲーションバーのハイライト
隣接兄弟結合子を使うと、マウスホバー時に現在のナビゲーション項目とその隣接項目をハイライト表示する効果を簡単に実装できます。
HTML コード例
<nav>
<ul>
<li>ホーム</li>
<li>サービス</li>
<li>ブログ</li>
<li>お問い合わせ</li>
</ul>
</nav>
CSS コード例
nav li:hover + li {
background-color: #f0f0f0; /* 背景色を変更 */
}
2.2 フォームの入力ヒント表示
隣接兄弟結合子を使用すると、フォームの入力欄にフォーカスが当たった時に、隣接する要素に補足情報を表示することができます。
HTML コード例
<label for="email">メールアドレス:</label>
<input type="email" id="email">
<span class="hint">正しいメールアドレスを入力してください。</span>
CSS コード例
input:focus + .hint {
display: inline-block; /* ヒントを表示 */
}
.hint {
display: none; /* 初期状態では非表示 */
}
3. 他のセレクターとの比較
3.1 兄弟結合子 (~)
兄弟結合子 (~) は、指定した要素の後に続くすべての兄弟要素を選択します。隣接兄弟結合子 (+) との違いは、"直後" か "すべて" かという点です。
3.2 子結合子 (>)
子結合子 (>) は、指定した要素の直接の子要素を選択します。兄弟要素ではなく親子関係にある要素を選択する点が異なります。
3.3 コード例
| セレクター | 説明 | 選択される要素 |
|---|---|---|
| h2 + p | h2 要素の直後に続く p 要素 | 該当する p 要素 1 つ |
| h2 ~ p | h2 要素の後に続くすべての p 要素 | 該当する p 要素 複数 |
| div > p | div 要素の直接の子要素である p 要素 | 該当する p 要素 複数（孫要素は含まない） |
4. まとめ
隣接兄弟結合子は、CSS で要素をピンポイントに選択するための強力なツールです。特に、隣接する要素にスタイルを適用する場合に非常に便利です。今回紹介した活用例を参考に、ぜひ皆さんのプロジェクトでも活用してみてください。
参考資料
CSS 隣接兄弟結合子に関する Q&A
Q1: 隣接兄弟結合子は、異なる親要素を持つ要素にも適用できますか？
A1: いいえ、適用できません。隣接兄弟結合子は、同じ親要素を持つ兄弟要素同士にのみ適用されます。
Q2: 隣接兄弟結合子を使用して、2 つ以上離れた兄弟要素を選択することはできますか？
A2: いいえ、できません。隣接兄弟結合子は、直後に続く最初の兄弟要素のみを選択します。2 つ以上離れた要素を選択する場合は、他のセレクターと組み合わせる必要があります。
Q3: 隣接兄弟結合子は、すべてのブラウザでサポートされていますか？
A3: はい、主要なモダンブラウザではすべてサポートされています。ただし、古いブラウザの中にはサポートしていないものもあるため、注意が必要です。caniuse.com などのウェブサイトで、各ブラウザのサポート状況を確認することができます。