Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
3
respuestas

Que pasa al usar el mismo id en varios elementos?

Tengo entendido que el id se puede asignar solo a un elemento, y el class se puede asignar varios elementos.

Pero, solo por curiosidad decidí hacer mi código asignándole el mismo id a todos los

  • ... para mi sorpresa todos los elementos con ese mismo id adquirieron el estilo que le asigne a ese id.

Por que ocurre eso?

El HTML lo tengo asi:

<ul>
        <li id="items">Atencion personalizada a los clientes</li>
        <li id="items">Espacio deferenciado</li>
        <li id="items">Localizacion</li>
        <li id="items">Profesionales calificados</li>
</ul>

El CSS lo tengo asi:

#items{
    font-style: italic;
}

Y la pagina quedo asi: Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

3 respuestas

Sucede lo mismo con id que con class pero creo yo que para las buenas practicas en el desarrollo web, se utiliza "class" para los elementos que van a repetir el mismo estilo y en cambio el id asigne un estilo único.

Como comentó el compañero por las buenas practicas, para no repetir codigo podrias hacerlo de otra manera mas optimizada. Te doy un ejemplo de como lo haría yo.

-html-

<ul class="item-list">
    <li>Atención personalizada a los clientes</li>
    <li>Espacio diferenciado</li>
    <li>Localización</li>
    <li>Profesionales calificados</li>
</ul>

-css-

.item-list{
    font-style: italic;
}

Lo ideal es usar una Clase si los elementos son repetidos, la funcionalidad de ID es para elementos que quieras identificar individualmente, es como asignarles un numero de identidad como el de las personas. En teoria todos podríamos tener el mismo número, pero en algun momento cuando tengamos que realizar un tramite o algo, nos va a traer problema si todos tenemos el mismo numero de identidad cierto? Para eso existen las clases.