Come selezionare l'etichetta per = "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;
}

Desidero selezionare l'etichetta in base all'attributo "for" per apportare modifiche al layout.

Il selettore sarebbe label[for=email], quindi in CSS:

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

... o in JavaScript utilizzando il DOM:

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

... o in JavaScript utilizzando jQuery:

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

È un selettore di attributi . Si noti che alcuni browser (versioni di IE <8, ad esempio) potrebbero non supportare i selettori di attributi, ma quelli più recenti sì. Per supportare browser meno recenti come IE6 e IE7, dovresti usare una classe (beh, o qualche altro modo strutturale), purtroppo.

(Presumo che il modello {t _your_email}riempirà un campo con id="email". In caso contrario, utilizza invece una classe.)

Tieni presente che se il valore dell'attributo che stai selezionando non si adatta alle regole per un identificatore CSS (ad esempio, se contiene spazi o parentesi, o inizia con una cifra, ecc.), Hai bisogno di virgolette intorno al valore:

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

Possono essere virgolette singole o doppie .

Se il contenuto è una variabile, sarà necessario concatenarlo tra virgolette. Ha funzionato per me. Come questo:

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

Se segue label immediatamente un inputelemento specificato :

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