Target the label of a checked input - html

Question

If I have a radio input that is wrapped within a label, how can I target the label when the input is checked?
<div>
<p>Payment Plan:</p>
<label><input name="os0" type="radio" value="monthly">TEST</label>
</div>
I tried:
input:checked + label { color: red }
and
input:checked + label
But none worked, what I am doing wrong? I also tried the > selector.
The reason I have label wrapping the input, is because I NEED the label to be clickable

Answer 1

There's no parent or backward selector in CSS (yet?). Thus, we can't select the wrapper label by the wrapped input.
There are two options:
1) Wrapping the content by an inline wrapper like <span> element, as follows:
<label>
<input name="os0" type="radio" value="monthly">
<span>TEST</span>
</label>
Then select the <span> by using adjacent sibling selector +:
input:checked + span {
color: red
}
WORKING DEMO
2) Using for attribute for the label to target the input by its id attribute as follows:
<input name="os0" type="radio" id="myinput" value="monthly">
<label for="myinput">TEST</label>
And Then select the label by:
input:checked + label {
color: red
}
WORKING DEMO.

Answer 2

Your css will work if you modify your html to this:
<div>
<p>Payment Plan:</p>
<input id="os0" name="os0" type="radio" value="monthly">
<label for="os0">TEST</label>
</div>
Using the for attribute with an id on the input will let you click on the label to affect the button, as it does when wrapped in the element.
http://jsfiddle.net/PMmrk/