Question

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

Answer 1

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>*/