css - INPUT から分離された:checked の CSS ルール

Question

通常のラジオボタンの場合

<input type="radio" id="radio2" name="radios"value="yes">
<label for="radio2">Yes</label>

<input type="radio" id="radio3" name="radios" value="no">
<label for="radio3">Yes</label>

ラベルの CSS は、checkedこのセレクターで設定できます

input:checked + label {
}

しかし、のlabel直後ではない場合はinput？たとえば、inputとをlabelhtml テーブル内に配置する場合。

forと のid属性は、 と を接続します。ラベルをクリックするlabelと、入力が選択されます。inputチェック入力のラベルの CSS ルールを設定するために、この接続を使用することは可能でしょうか。

Answer 1

いいえ、ありません。CSS セレクターで HTML 属性の値を「動的に」使用することはできません (ただし、 のように静的に使用することはできlabel[for=radio2]ます)。

ラベルの内容に基づいてラベルのスタイルを設定したい場合は、ラベルを区別できる属性 (クラスなど) を与えるか、JavaScript を使用する必要があります。