[css] How to select label for="XYZ" in CSS?

HTML:

<label for="email">{t _your_email}:</label>

CSS:

label {
  display: block;
  width: 156px;
  cursor: pointer;
  padding-right: 6px;
  padding-bottom: 1px;
}

I wish to select the label based on the 'for' attribute to make layout changes.

This question is related to css css-selectors

The answer is


If the content is a variable, it will be necessary to concatenate it with quotation marks. It worked for me. Like this:

itemSelected(id: number){
    console.log('label contains', document.querySelector("label[for='" + id + "']"));
}

If the label immediately follows a specified input element:

input#example + label { ... }
input:checked + label { ... }