CSSの[~]

[~]これの使い道がよく分からない。

<div class="alpha-on">...</div> <!-- <div class="alpha-off">...</div> -->
<div class="beta">...</div>
<div class="gamma">...</div>
<div class="delta">...</div>

こんな感じのHTML。

• .alpha-onか.alpha-offのどちらか
• それぞれの時によって.deltaのCSSを変えたい
• .deltaのclass名は変わらない

そうか！

.alpha-on ~ .delta { display: block; }
.alpha-off ~ .delta { display: none; }

こんなCSSを眺めてたら分かった。

.alpha-on + .beta + .gamma + .delta { display: block; }
.alpha-off + .beta + .gamma + .delta { display: none; }

次の要素に適用したい時だけ[+]で、それ以外は[~]。