CSS select parent element

Question

Supposing I have a HTML like this

<label><input type="radio" checked></label>
<label><input type="radio"></label>

Question: how can I select the label of a checked radio in this case?

A bit of [research](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Patsy Issa, Jul 24 '13 at 08:09

score 2 · Answer 1 · answered Jul 24 '13 at 08:12

What you are trying to achieve is not possible in CSS3.. if you want, you can wrap the elements inside a container, and position them either by floating, or by using position: absolute;

Demo (Not relevant as you've not provided any specific code, but I've shared a general example here)

div.wrap label {
    float: left;
}

.wrap input[type=radio]:checked + label {
    color: red;
}

score 1 · Answer 2 · answered Jul 24 '13 at 08:10

In CSS3, there's currently no way to do that.

What you should do is add a class to your labels, then target that class.

For reference, they're looking to include this in the CSS 4 Specification which would use the notation:

!label > input[type="radio"]:only-child

But that's not supported by any browsers yet (as it isn't even finalised).

CSS select parent element

2 Answers2