Varios elementos con el mismo ID respondiendo a un selector de ID CSS
¿Es seguro dar a varios elementos el mismo ID en una página? Por ejemplo, esto sucede a menudo cuando se utilizan algunos complementos de jquery, cuando ejecuta algún control deslizante o galería dos veces o más. Sabemos que a los desarrolladores les gusta dar alguna identificación al contenedor html para que el script funcione más rápido.
Leamos la documentación de w3.org :
Lo que hace que los atributos de tipo ID sean especiales es que no hay dos atributos que puedan tener el mismo valor; cualquiera que sea el idioma del documento, se puede utilizar un atributo ID para identificar de forma única su elemento.
Pero el siguiente ejemplo con 2 elementos que tienen el mismo ID funciona bien en todos los navegadores, aunque no es válido:
#red {
color: red;
}<p id="red">I am a red text.</p>
<p id="red">I am a red text too.</p>¿Alguien puede explicar esta extraña situación?
Los navegadores siempre intentan "fallar silenciosamente". Lo que esto significa es que aunque su HTML no sea válido, el navegador intentará adivinar cuál fue su intención y lo manejará en consecuencia.
Sin embargo, desviarse de las especificaciones puede provocar algunos efectos secundarios muy imprevistos.
Por ejemplo:
document.getElementById('red');
Sólo te conseguirá el primero.
También tendrás que probar tu página en todos los navegadores que tus usuarios puedan usar, para asegurarte de que tu código funcione según lo previsto. No puedes simplemente asumir que funcionará.
En resumen: ¡ no hagas esto! Si necesita apuntar a varios elementos con el mismo CSS, use un nombre de clase. Para eso fueron diseñados...
Una vez dicho esto; Si realmente necesita seleccionar varios elementos con el mismo ID, utilice un selector de atributos:
document.querySelectorAll('p[id="red"]');
Sin embargo, tenga en cuenta que esto no funciona en IE7 y versiones inferiores...
¿Es seguro dar a varios elementos el mismo ID en una página?
Como sabes, va en contra de las reglas de validación darle a más de un elemento el mismo ID en una sola página. Sin embargo, las reglas se infringen y, en el mundo de la sopa de etiquetas HTML, los navegadores deben tener en cuenta estas reglas infringidas sin romper las páginas, de ahí el comportamiento que se observa.
Aunque se ha demostrado que los navegadores se comportan de la misma manera incluso si lo haces (afortunadamente para situaciones en las que no se puede evitar), no lo llamaría totalmente "seguro" hacerlo, ya que dicho comportamiento puede no ser consistente o confiable.
La mejor opción es seguir las reglas tan fielmente como puedas y solo romperlas si tienes muy, muy buenas razones para hacerlo (y casi nunca las tendrás , así que ni siquiera lo consideres). De lo contrario, como dijo Joseph Silber , utilice clases, diseñadas específicamente para clasificar o agrupar múltiples elementos.
¿Alguien puede explicar esta extraña situación?
CSS no impone ni asume la unicidad de los ID en un documento HTML; en cambio, la especificación de Selectores simplemente dice esto:
Un selector de ID representa una instancia de elemento que tiene un identificador que coincide con el identificador en el selector de ID.
Observe el uso de la palabra "un" a lo largo de esta oración.
A continuación de esa declaración hay algunos ejemplos de usos, que utilizan la palabra "cualquiera" en su lugar:
El siguiente selector de ID representa cualquier elemento cuyo atributo de tipo ID tenga el valor "capítulo1":
#chapter1El siguiente selector representa cualquier elemento cuyo atributo de tipo ID tenga el valor "z98y".
*#z98y
La suposición de un documento conforme se aclara en el nivel 3 de la especificación de Selectores, cerca del comienzo de la sección (el énfasis es mío):
Lo que hace que los atributos de tipo ID sean especiales es que no hay dos de esos atributos que puedan tener el mismo valor en un documento conforme , independientemente del tipo de elementos que los lleven; cualquiera que sea el idioma del documento, se puede utilizar un atributo de tipo ID para identificar de forma única su elemento.
Donde "conforme" se refiere a la conformidad con HTML, no con CSS. Tenga en cuenta que este texto no estaba presente en la especificación de nivel 2, que es la que cita en su pregunta.
Tenga en cuenta que el texto que se cita no es normativo. Si bien es una forma de ayudar a los implementadores a resolver casos de manejo de errores, no es una regla obligatoria a seguir y, de hecho, cualquier implementación es libre de comportarse de manera diferente sin violar la especificación. No escriba HTML no válido sólo para aprovechar lo que puede parecer esperado o comportamientos consistentes, porque no puede garantizar que estos comportamientos sigan siendo así. Cualquier implementación de CSS es libre de hacer coincidir elementos que comparten el mismo ID de manera diferente, o incluso dejar de hacerlos coincidir por completo, si decide que así es como debe manejar los documentos que infringen esta regla.
En otras palabras: sólo porque puedas, no significa que debas hacerlo.
