CODEWITHSUNDEEP
csscss-selectors
golmschenk
golmschenk

Reputation: 12404

CSS - Selector of label for type?

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!

Upvotes: 6

Views: 26724

Answers (5)

ScottS
ScottS

Reputation: 72261

First - a correction

The for attribute is only to be tied to an id of the form element it is associated with, so you are misusing the attribute for what you are seeking to do. The design of for is to tie it to one specific element in the form. So something like this:

<label for="RadioChk">My Radio Button</label><input id="RadioChk" type="radio" />

So the for is not the solution to just checking for a type.

Second - the only CSS only solution

The only clean way it can be done with pure CSS is if your elements are ordered like so (label following the input):

<input type="radio" /><label>My Radio Button</label>

Which then allows this css to select:

input[type=radio] + label {
    /* styles */
}

If that cannot be done, then I would go with AbsoluteƵERØ's solution of using a class.

Upvotes: 4

AbsoluteƵER&#216;
AbsoluteƵER&#216;

Reputation: 7880

You should use special classes for those labels instead. You cannot style a parent element based on its children's atttributes in CSS [presently].

<label class='radio'><input type='radio'></label>

Your stylesheet would say

label.radio{
  /* add styles here */
}

Upvotes: 4

Spudley
Spudley

Reputation: 168685

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.

Upvotes: 6

Explosion Pills
Explosion Pills

Reputation: 191749

What you are trying to do is not possible (with CSS alone anyway). The [attribute=value] syntax works by checking the value of the attribute for that specific element. Thus, for=[type="radio"]] is looking for something like <label for='[type="radio"]'> (if the syntax is even valid).

Upvotes: 1

StephenWidom
StephenWidom

Reputation: 132

Try this:

input[type=radio]
{
CSS goes here
}

Upvotes: -3

Related Questions