Target the label of a checked input

Question

If I have a radio input that is wrapped within a label, how can I target the label when the input is checked?

  
Payment Plan:
  &l         


        
      

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 element, as follows:

  
  TEST

Then select the 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:

TEST

And Then select the label by:

input:checked + label {
    color: red
}

WORKING DEMO.