¿Cómo seleccionar la etiqueta para = "XYZ" en CSS?

HTML:

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

CSS:

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

Deseo seleccionar la etiqueta basada en el atributo 'for' para realizar cambios de diseño.

El selector sería label[for=email], entonces, en CSS:

label[for=email]
{
    /* ...definitions here... */
}

... o en JavaScript usando el DOM:

var element = document.querySelector("label[for=email]");

... o en JavaScript usando jQuery:

var element = $("label[for=email]");

Es un selector de atributos. . Tenga en cuenta que algunos navegadores (versiones de IE <8, por ejemplo) pueden no admitir selectores de atributos, pero los más recientes sí. Para admitir navegadores antiguos como IE6 e IE7, tendría que usar una clase (bueno, o alguna otra forma estructural), lamentablemente.

(Supongo que la plantilla {t _your_email}completará un campo con id="email". Si no, use una clase en su lugar).

Tenga en cuenta que si el valor del atributo que está seleccionando no se ajusta a las reglas para un identificador CSS (por ejemplo, si tiene espacios o corchetes, o comienza con un dígito, etc.), necesita comillas alrededor del valor:

label[for="field[]"]
{
    /* ...definitions here... */
}

Pueden ser comillas simples o dobles .

Si el contenido es una variable, será necesario concatenarlo con comillas. Funcionó para mi. Me gusta esto:

itemSelected (id: number) {
    console.log ('etiqueta contiene', document.querySelector ("etiqueta [para = '" + id + "']"));
}