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

256

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.

Kyle
fonte

Respostas:

496

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 .

TJ Crowder
fonte
Vou mudá-lo para uma classe para ie7 usando condição e comentários, obrigado pela ótima resposta!
Kyle
E agora os documentos do jQuery dizem que você não precisa de aspas para palavras únicas; portanto, ele corresponde ao CSS novamente (nesse sentido).
TJ Crowder
6
Para evitar confusão a todos (eu só tinha isso mesmo), não deve haver espaço entre labele[for=email]
paddotk
O IE8 suporta seletores de atributos desde que a página tenha um <! DOCTYPE> declarado.
Ilinamorato 07/10/2013
1
@TJCrowder eu entendo. Eu estava apenas esclarecendo o ponto quando o testei.
Ilinamorato
0

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 + "']"));
}
Julio Cesar Brito Gomes
fonte