Como selecionar o rótulo para = "XYZ" em CSS?

HTML:

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

CSS:

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

Desejo selecionar o rótulo com base no atributo 'for' para fazer alterações no layout.

O seletor seria label[for=email], então, em CSS:

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

... ou em JavaScript usando o DOM:

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

... ou em JavaScript usando jQuery:

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

É um seletor de atributos . Observe que alguns navegadores (versões do IE <8, por exemplo) podem não suportar seletores de atributos, mas os mais recentes. Para oferecer suporte a navegadores mais antigos, como o IE6 e o ​​IE7, você teria que usar uma classe (bem, ou alguma outra maneira estrutural), infelizmente.

(Estou supondo que o modelo {t _your_email}preencha um campo com id="email". Caso contrário, use uma classe.)

Observe que, se o valor do atributo que você está selecionando não se encaixa nas regras de um identificador CSS (por exemplo, se houver espaços ou colchetes ou se iniciar com um dígito etc.), você precisará de aspas valor:

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

Eles podem ser aspas simples ou duplas .

Se o conteúdo for uma variável, será necessário concatená-lo entre aspas. Funcionou para mim. Como isso:

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