[解決済み】チェックしたラジオボタンのラベルをCSSセレクタで指定する方法

質問

チェックしたラジオボタンのラベルにcss(3)のスタイルを適用することは可能ですか？

次のようなマークアップがあります。

<input type="radio" id="rad" name="radio"/>
<label for="rad">A Label</label>

私が期待していたのは

label:checked { font-weight: bold; }

は何かをしてくれるはずなのですが、残念ながら（予想通り）してくれません。

このような機能を実現するセレクタはないのでしょうか？ divなどで囲んでもいいですが、ラベルの''for''属性を使ったものがベストだと思います。

なお、私はアプリケーションのブラウザを指定することができますので、クラス最高のcss3などをお願いします。

解決方法は？

を試してみてください。 + 記号を使用します。 これは隣接兄弟コンビネータである。これは、同じ親を持つ2つの単純なセレクタの列を結合し、2つ目のセレクタは 即座に の後。

このように

input[type="radio"]:checked+label{ font-weight: bold; } 
 //a label that immediately follows an input of type radio that is checked 

は、次のようなマークアップに非常にうまく機能します。

<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>

...そして、ラベルがラジオ入力に続いている限り、divなどの有無にかかわらず、どんな構造でも動作します。

例

input[type="radio"]:checked+label { font-weight: bold; }

<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>