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.
Well it's not possible in CSS (as I tried) you can easily do it in JS:

```
let l = document.querySelectorAll('input[required]')
l.forEach(e => {
  e ? e.parentElement.classList.add('required-input') : null;
})

```

```js
let l = document.querySelectorAll('input[required]')
l.forEach(e => {
  e ? e.parentElement.classList.add('required-input') : null;
})
```

```css
.required-input label::after {
  content: " *";
  color: red;
}
```

```html
<div>
  <label for="user">Required</label>
  <input name="user" required/>
</div>
<br>
<div>
  <label for="user">not required</label>
  <input name="user" />
</div>
```