WillxD.CoM

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!