Econtrar diferencias entre los identificadores “ID” y las clases “Class” es una de las primeras dudas que aparecen en el aprendizaje de CSS.
A simple vista no parece haber ninguna diferencia, pero sin embargo estamos muy equivocados, ya que sí existen grandes diferencias.
Lo que siempre se estila decir para explicar es
“ID solo se usa una vez y Class se utiliza varias veces”
¿Pero por qué? a mi parecer esa no es una explicación, sino una simple proposición. Sin embargo tienen razón, pero siempre es bueno saber el porqué (no siempre crean todo lo que le dicen por más ducho que sea, siempre pregunten el ¿Por Qué? xD )
Identificadores “ID”
Para comenzar el “ID” es un identificador de un objeto, y un objeto solo puede tener un solo identificador, así como en la vida cotidiana, nosotros tenemos un DNI (documento de identidad) que es el cual nos identifica, y nadie más puede tener el mismo DNI.
Veamos un ejemplo:
#contenido{ background:#9CC; margin: auto; padding:20px; } #sidebar{ width:300px; background:#99C; padding:10px; } #footer{ background:#CCC; border:1px solid #093; margin:10px 12px 20px 15px; }
<div id="contenido"></div> <div id="sidebar"></div> <div id"=footer"></div>
En este ejemplo tenemos 3 identificadores que no se repiten.
¿Qué pasa si repetimos un identificador?
Una de los primeros problemas es que no podremos validar el CSS. Ya que cuando en una web tenemos varios objetos con el mismo ID, hay errores en la interpretación de los navegadores.
El identificador no solo es importante en CSS sino también en el uso de JavaScript, Ajax con los que los identificadores toman un papel muy importante.
Otro de los usos de “id” es que podemos poner links en nuestros sitios que nos dirigirá a sitios específicos.
Usando el ejemplo anterior. Si tenemos un link así:
<a href="#footer"> Ir al footer </a>
el navegador nos dirigirá al elemento que tenga como “id” a footer.
Clases (Class)
En cambio las clases “class” son propiedades que un objeto o varios objetos pueden tener.
Además a un objeto le podemos aplicar varias clases.
Veamos un ejemplo
.texto { font-size:12px; color:#069; } .negrita { font-weight:bold; }
<div class="texto"> En este texto heredamos las propiedades de la clase texto </div> <div class="texto"> Volvemos a heredar las propiedades de la clase texto </div> <div class="texto negrita"> Este texto hereda las propiedades de las clases texto y negrita. </div>
Otros..
Otro de los puntos que debemos saber es que si a un elemento le aplicamos un “ID” y un “Class” el elemento herederá preferentemente las propiedades del “ID”
Por ejemplo:
.com{ background:#939; font-size:18px; } #fil{ background:#393; font-size:10px; }
<div id="fil" class="com"> Este texto hereda las propiedades tanto del identificador como de la clase. Pero si se repiten, toma como preferencia el del identificador. </div>
En ese ejemplo toma como preferencias las propiedades del “ID” que le asigné.
Espero que haya despejado algunas dudas y si por el contrario si te di más dudas xD no dudes en comentar para saber tu opinión o duda.
Salu2!
Muy buenas las explicaciones que das en la web. Sirven de mucho.
Saludos
Muy buena explicación, se agradece un monton.
Genial !!!
Estaba hecho un lio, porque las utilizaba indistintamente y sin saber por qué. Muchas ThankYou.
realmente util
mil gracias
Muy bueno el aporte he buscado en varias web incluso hasta en las más prestigiosas diría yo y las explicaciones es tal como dicen acá: id para uno y class para muchos asi que felicidades por tan buena explicación
Nada mejor que una explicación S E N C I L L A. Se agradece.
Pués me repito pero vale la pena, gracias por la explicación.
Magistral.. muchas gracias!
Buena voz… barrio!
me ayudo bastante!
me has ayudado un monton mil gracias
tengo una pregunta en la creacion de un sitio web si solo us div´s ID no hay ningun problema o debo usar class …. esto influye en la facilidad de ordenarlos o es independiente agradezco una respuesta
No hay problema que uses solo los ID. No es una obligación usar “class”, pero te puede ser útil, cuando tengas varios elementos que tengan el mismo estilo y no tengas que repetir código
Muchísimas gracias!! porque tenía un lío que no veas
AMIGO NO SABES CUANTO TE AGRADESCO! , ESTABAA HECHO PEDASOS PENSANDO POR QUE NO ME SALIAN UNAS COSAS QUE QUERIA LOGRAR , GRACIAS A TI TODO ESTA COMO NUEVO MIL GRACIAS!
ERES EL MEJOR BRO!!
me has ayudado un monton mil gracias
Muy bien explicado tan sólo me pregunto porque en un validador de css en TODOS lo ID me dice que no debo utilizar IDs en selectores???
Agradezco si me lo puede explicar.
Muy Muy explicado, Saludos.
Me lo has aclarado perfectamente, no sabía en que se diferenciaban. ¡Gracias!
BRAVO, EXCELENTE Y GENIAL. Me gusta que haya gente que no de por supuesto que las cosas vienen bien explicadas por internet y dediquen un rato de su vida a solucionar dudas existenciales como esta !!!
GRACIAS
es perfecta tu explicacion!
Genial tu explicación, gracias.
Una pregunta: Tu explicación es validad para css3?
salu2