CODEWITHSUNDEEP
htmlcss
Rick Kukiela
Rick Kukiela

Reputation: 1264

style a label tag based on the class of the elment it is a label "for"

I tried:

html:

<p><label for="address1">Address 1:</label> <input type="text" class="required" id="address1" name="address1" value="" /></p>

css:

input.required + label { color: #c00; }

however this does not seem to be working... Am i doing it wrong?

Firefox 8 testing

Upvotes: 1

Views: 8217

Answers (4)

John Hartsock
John Hartsock

Reputation: 86882

Try using an attribute selector, like this:

label[for='address1'] { color: #c00; }

This works in the following browsers

  • Firefox 8.
  • IE 8 +
  • Chrome
  • Safari 5
  • Opera 11.52

Here is a fiddle. http://jsfiddle.net/TeU7U/

Upvotes: 6

ZeljkoSi
ZeljkoSi

Reputation: 64

This should work. Not sure how is it with compatibly with older browsers and performance issues.

The HTML:

<label>Address 1: <input type="text" class="required" id="address1" name="address1" value="" /></label>

the CSS:

label > .required{
background:#900;

}

and a fiddle to go along

http://jsfiddle.net/S1l3/2eVQ8/

Upvotes: 0

Leo
Leo

Reputation: 5286

input.required + label will actually match any label wich immediately follows an input with the class required. Wich is why it won't work in your case.

You could use something like label[for='address1'], but if you want to style every label that's associated with a required input, you could simply add your required class to the wrapping p. You could then use p.required label as a selector.

Upvotes: 2

Rob W
Rob W

Reputation: 349012

The + selector is a sibling selector. input + label applies a style to a <label> element which is the next element directly after <input>, as seen at http://jsfiddle.net/Wg7Rr/.

There is no CSS to select the previous sibling, unfortunately.

Instead of applying required to the input element, you can attach the class to the label, o the parent, then use:

label.required + input { color: #c00; }   /*<label class=required /><input>*/
.required > label { color: #c00}          /*<p class=required><label /><input>*/

Upvotes: 4

Related Questions