El #idselector le permite apuntar a un elemento haciendo referencia al idatributo HTML. De manera similar a como se indican los atributos de clase en CSS con un "punto" ( .) antes del nombre de la clase, los atributos de ID tienen el prefijo "octothorpe" ( #), más comúnmente conocido como un "hash" o "signo de almohadilla".
#header ( /* this is the ID selector */ background: #eee; )Los valores de los atributos de ID deben ser únicos. HTML con dos o más mensajes de correo idelectrónico idénticos no se valida y producirá resultados impredecibles. Si hay dos iguales, CSS seguirá coincidiendo y aplicando estilo a ambos. Sin embargo, JavaScript, al buscar un ID, encontrará el primero y se detendrá.
Los selectores de ID son extremadamente poderosos. Tienen una especificidad muy alta, generalmente escrita como (0, 1, 0, 0). Los estilos que se aplican con ellos anulan otros selectores que solo usan etiquetas o clases. Demostrar:
Se proporciona un párrafo con un atributo ID y clase que contradice las reglas CSS; a pesar de que el selector de clase ( .reusable) está debajo del selector de ID ( #unique) en el CSS (generalmente anula los estilos por encima de él en la "cascada"), el párrafo permanece rojo porque #uniqueabruma el color azul que se establece .reusable. Una cantidad infinita de clases nunca puede superar la especificidad de la ID (aunque hubo un error en un momento en el que 256 clases superaban a una ID).
La alta especificidad y singularidad significan que el uso de #idCSS es una “opción nuclear”: sobrepotenciada, inflexible y desproporcionadamente efectiva. Evitar el #idselector en CSS se considera una práctica recomendada: es preferible utilizar una clase en casi todos los casos.
Dicho esto, los atributos de ID tienen varios usos valiosos fuera de CSS:
- Proporcionar enlaces únicos para JavaScript
- Los elementos con
idatributos pueden ser identificados por etiquetas de ancla, estableciendo elhrefatributo en elidvalor, precedido por un#símbolo. Al hacer clic en ese enlace de anclaje, la página actual se volverá a enfocar en el elemento con la coincidenciaid. Esto se denomina "identificador de fragmento". - Para elementos verdaderamente únicos en su HTML, como elementos de formulario, los ID pueden ser útiles para cosas como enlazar
labelsyinputs.
Puntos de interés
- Un valor válido
#idno puede comenzar con un número y debe tener al menos un carácter. Una gran parte de Unicode son caracteres válidos en unid. idLos atributos y selectores distinguen entre mayúsculas y minúsculas y deben coincidir exactamente en HTML, CSS y JavaScript.
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| Alguna | Alguna | Alguna | Alguna | Alguna | Alguna | Alguna |