Comment sélectionner l'étiquette pour = "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;
}

Je souhaite sélectionner le libellé en fonction de l'attribut «pour» pour effectuer des modifications de mise en page.

Le sélecteur serait label[for=email], donc en CSS:

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

... ou en JavaScript en utilisant le DOM:

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

... ou en JavaScript avec jQuery:

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

C'est un sélecteur d'attribut . Notez que certains navigateurs (versions d'IE <8, par exemple) peuvent ne pas prendre en charge les sélecteurs d'attributs, mais les plus récents le font. Pour prendre en charge les anciens navigateurs comme IE6 et IE7, vous devez malheureusement utiliser une classe (enfin, ou une autre manière structurelle).

(Je suppose que le modèle {t _your_email}remplira un champ avec id="email". Sinon, utilisez plutôt une classe.)

Notez que si la valeur de l'attribut que vous sélectionnez ne correspond pas aux règles d'un identifiant CSS (par exemple, s'il contient des espaces ou des crochets, ou commence par un chiffre, etc.), vous avez besoin de guillemets autour du valeur:

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

Il peut s'agir de guillemets simples ou doubles .

Si le contenu est une variable, il sera nécessaire de le concaténer avec des guillemets. Ça a marché pour moi. Comme ça:

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