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: 
This solution works in most modern browsers:

```
<style>

label > input[required="required"] {
    background: red; 
}

</style>
<label for="myField"><input required="required" id="myField" /></label>

```
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>
```