¿Cómo seleccionar la etiqueta for = "email" en CSS?

Question

HTML:

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

CSS:

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

Quiero hacer un nuevo CSS para la etiqueta de correo electrónico, ya que no está destinado a ser que de ancho.

Answer 1

El selector sería label[for=email], por lo que en CSS:

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

... o en JavaScript usando el DOM:

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

... o en JavaScript utilizando jQuery:

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

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

(estoy asumiendo que la plantilla {t _your_email} llenará en un campo con id="email". Si no es así, utilice una clase en su lugar.)

Tenga en cuenta que si el valor del atributo que está seleccionando no encaja las reglas para un CSS identifier (por ejemplo, si tiene espacios o soportes en ella, o comienza con un dígito, etc.), es necesario comillas alrededor del valor:

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

Ellos can be single or double quotes.