読者です 読者をやめる 読者になる 読者になる

Milk+ea

Weblog Is My Hobby.

CSSの[~]

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のどちらか
  • それぞれの時によって.deltaCSSを変えたい
  • .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; }

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