CSS一般兄弟セレクター (A ~ B) — 後続のすべての兄弟
参照要素の後に続くすべての兄弟要素をターゲットするCSS一般兄弟コンビネータ(~)を学びます。隣接兄弟セレクターとの違いを理解します。
Combinators
詳細な説明
CSS一般兄弟セレクター
一般兄弟コンビネータ（~）は、参照要素に続くすべての兄弟要素を、直接隣接しているかどうかに関係なく選択します。
構文
/* <h2>の後に来るすべての<p>要素を選択
（同じ親を共有している場合） */
h2 ~ p {
color: #555;
}
隣接兄弟と一般兄弟の比較
| コンビネータ | 構文 | マッチ |
|---|---|---|
| 隣接 | A + B |
直後の兄弟のみ |
| 一般 | A ~ B |
タイプBの後続するすべての兄弟 |
クリエイティブな使用法
CSSのみのトグルパターン:
/* チェックボックスがチェックされたときにコンテンツを表示 */
input[type="checkbox"]:checked ~ .content {
display: block;
}
制限事項
- 前方にのみ機能 — CSSでは前の兄弟を選択できない
- 両方の要素が同じ親を共有する必要がある
ユースケース
一般兄弟セレクターはCSSのみのインタラクティブパターンに強力です。JavaScriptなしでチェックボックスベースのトグルを実現し、コンテンツセクションを表示し、状態に依存するスタイリングを作成できます。アコーディオンパターン、ラジオ入力で構築されたタブインターフェースにも使用されます。