CSS実行条件

質問

チェックボックスがオンになったらCSSを実行するようにしたいので
いろいろ調べたんですが、下のようなCSSがないんです。

|||ボックスがオフなら要素で囲まれている文字を隠す
|||オンなら囲まれている文字を表示する。

<input id="checkbox1" type="checkbox">
<label for="checkbox1" class="c1">テスト</label>
<div class="a">
表示したり隠したりする部分
</div>

<div class="a">で囲まれている部分を隠したり表示したりします。
どなたかお願いします。

回答No.2

神崎 渉瑠（@taloo） · ベストアンサー

#checkbox1 ~ .a {display:none;}
#checkbox1:checked ~ .a {display:block;}

Android4.0以下のAndroidブラウザ（標準ブラウザ）では動的な変化が対応していないようです。
https://groups.google.com/forum/#!topic/html5-developers-jp/RbAznmIGWaw

Android4.2は実機では動的変化に対応していますが、エミュレーターでは対応していません。

-------
追伸。
細かな言い回しにこだわりは持ってませんので。
ただし表現によっては、見当違いな回答をするかもしれません。
たとえばアニメーションで「回転」させる方法（回転の概念）は４種類（以上）ありますしね。

お礼

ありがとうございます！
回答通りにCSSを入力すると出来ました。
回答ありがとうございました！

回答No.1

play_with_you

確かに表示/非表示の切り替えは「スタイルの変更」だから、CSSでそういうことができたらいいなという気持ちは分かります。
HTMLやCSSはプログラム言語じゃないんだから無理。「実行」するもんでもないし。
そういうのはJavaScriptでやるものです。ありがちな用途ので、検索すればいくらでも例が転がってます。

お礼

CSSだけでは無理ですか・・・

:checkedやdisplayなどでいけると
思ったのですが…
検索で調べて見つけたのは
チェックをするとラベルの背景色が変わったりする
サイトとかで…

どうも、回答ありがとうございました。