CSS Selector for label bound to input

Question

Is there a way in CSS to select labels bound to input fields (via the for attribute) having the required attribute set? Something like:

label:input[required] {   ... } 

Currently, I'm adding class="required" to labels and inputs for styling. I now have the HTML5 attribute required="required" in the required input fields. It would be nice to remove the redundant class attributes.

The closest answer I found doesn't use the label element's for attribute, but would require that the label be directly adjacent to the input in the HTML.

Answer 1

How about CSS 2 Attribute Selectors It is pretty compatible amongst browsers.

Example:

<style> label[required=required] { color: blue; } </style> <label required="required" for="one">Label:</label><input name="one" id="one" /> 

Also check this out.

Answer 2

This solution works in most modern browsers:

<style>  label > input[required="required"] {     background: red;  }  </style> <label for="myField"><input required="required" id="myField" /></label>