Question: Is there a way in CSS to select `label`s 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](https://stackoverflow.com/questions/1431726/css-selector-for-a-checked-radio-buttons-label) 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: 
How about [CSS 2 Attribute Selectors](http://www.w3.org/TR/CSS2/selector.html)
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](http://www.andybudd.com/archives/2003/09/cool_use_for_css_attribute_selectors/) out.
I don't think this can really be accomplished through CSS in the way that the OP wants. CSS just doesn't work that way.

A better approach in my opinion is to step back and look at the big picture. You have a form where some fields are required and some are not. It is a good approach to give the user all the required fields first, or group the required fields together, and keep them clearly separate from the optional fields.

You can create a structure such as

```
<form>
     <ul class="required_fields">
       <li>
          <label>username</label>
          <input />
       </li>
       <li>
          <label>email</label>
          <input />
       </li>
     </ul
     <ul class="optional_fields">
          ...
     </ul>
 </form>

/* CSS */
.required_fields label {font-weight: bold} 
.required_fields label:after { content: "*"; color: red } /*more styles for labels*/

```

There are a number of benefits to this approach. You can add and remove items from the 'required' group easily without having to modify each one individually. You can assign the 'required' class as high up the chain as you want. If the form had the 'required' class, then everything in it would be labeled as required. There are fewer places to make changes, if you decided that the 'required' class should be called something else. And in general this approach also helps you organize your forms better. You should not intermingle required and optional fields.

You could take this a step further and have some javascript that will inject the required attribute into the input fields as well. 

```
$(".required_fields input").each(function(){
   this.setAttribute('required', 'required');
});

```