CSS - Selector of label for type?

Question

I'm using this post explaining how to add a selector of a label for a given element. However, I'd like to use it to select all labels for a given type (specifically, the type radio). Trying:

label[for=input[type="radio"]] {
    /* Styles */
}

and

label[for=[type="radio"]] {
    /* Styles */
}

does not work and I'm not sure what I'm doing wrong or how to do it right. Can someone explain the solution to me? Thank you much!

Answer 1

Unfortunately, what you're wanting can't be done using current CSS3 selectors.

There are plans for this feature to be included in CSS level 4 selectors, but the spec for this is not yet finalised, and certainly not implemented in any current browsers.

The idea is for a selector that would look something like this:

label /for/ [type="radio"] {
    /* styles */
}

But that's for the future, not for now. Sorry.

You can read about it here: http://css4-selectors.com/selector/css4/reference-combination/

In the meanwhile, if you need this kind of thing, you will need to make sure you structure your HTML such that the elements can reference each other using current CSS selectors.

For example, if they're next to each other, you could use this:

label + input[type="radio"] { .... }

That's as close as you'll get for the time being.