CSS ・ CSSの記法
A ~ B
一般兄弟セレクタ（後ろにある兄弟すべて）
セレクタを「~（チルダ）」で区切ると、「A より後ろにある兄弟要素の B」をすべて指定できます。
01
サンプルコード
HTML
1<h2>メニュー</h2>
2<p>1つ目の段落</p>
3<p>2つ目の段落</p>
4<p>3つ目の段落</p>
CSS
1/* h2 より後ろにある兄弟の p すべて */
2h2 ~ p {
3 color: #c0392b;
4}
02
実行結果
ブラウザでの表示h2 より後ろにある段落がすべて赤くなります
03
解説
A ~ B と書くと、A と同じ親を持ち、A より後ろにあるすべての B が対象になります。これを「一般兄弟セレクタ」と呼びます。
隣接兄弟セレクタ（A + B）は直後の1つだけですが、一般兄弟セレクタは間にほかの要素があっても、後ろにあるものすべてに当てはまります。上の例では、3つの段落がすべて赤くなっています。
チェックボックスの状態に応じて後ろの要素の表示を切り替えるなど、CSSだけで簡単な動きを作るときにも使われます。
04
応用例・注意点
関係を表すセレクタ（結合子）
| 書き方 | 説明 |
|---|---|
A B | 子孫：A の中にある B すべて |
A > B | 子：A の直下にある B だけ |
A + B | 隣接兄弟：A のすぐ次の B（1つだけ） |
A ~ B | 一般兄弟：A より後ろの兄弟の B すべて |
チェックで内容を表示する
:checked と ~ を組み合わせると、JavaScript を使わずに表示を切り替えられます。
HTML
1<input type="checkbox" id="more">
2<label for="more">詳しく見る</label>
3<p class="detail">詳しい説明です。</p>
CSS
1.detail {
2 display: none;
3}
4#more:checked ~ .detail {
5 display: block;
6}
注意点
- 01A より前にある兄弟は指定できません。
- 02~ はキーボードの「へ」のキーを Shift と一緒に押すと入力できます（日本語配列の場合）。