JMiur [E]

Algo que siempre causa alguna confusión cuando escribimos CSS es determinar si debemos aplicar esas definiciones como clases o IDs ¿Cuál es la diferencia?

Tanto una como otra sirven para identificar una etiqueta y, de ese modo, nos resulta más sencillo agregarle propiedades. Por ejemplo:
<style>
#nombreID {color: red;}
.nombreClase {color: blue;}
</style>

<div id="nombreID"> este texto será rojo </div>
<div class="nombreClase"> este texto será azul </div>
Para definir las propiedades de un ID le anteponemos el símbolo # al nombre y para definir una clase, usamos un punto.

Una regla elemental y que no debe violarse dice que sólo usaremos un ID si esa etiqueta es única, no debería haber dos etiquetas con el mismo ID en la misma página; en cambio, usaremos class si es un estilo que repetiremos en diferentes etiquetas.

Además, suele decirse que el atributo ID se utiliza para definir áreas específicas de una página (el header, el footer, un menú, etc) y una clase se usa para definir estilos de tipo general (enlaces, listas, etc).

Los ID nos permiten organizar el estilo e identificar etiquetas para luego manipularlas con JavaScript. Las clases, nos evitan escribir códigos repetidos y esa es su mayor utilidad.

Hay varias formas de implementarlas:
a.green {color: green;}
hará que los enlaces que contengan esa clase, se muestren de color verde:
<a class="green"> el enlace será de color verde </a>
<p class="green"> este párrafo NO será de color verde </p>

En cambio, esta otra:
.green {color: green;}
hará que cualquier etiqueta que contengan esa clase, se muestren de color verde:
<a class="green"> el enlace será de color verde </a>
<p class="green"> este párrafo también será de color verde </p>

Tanto las clases como los IDs pueden combinarse asi que no es extraño ver cosas como estas:
<div id="unNombre" class="unaClase"> ....... </div>
o bien:
<div class="unaClase otraClase"> ....... </div>
¿Para qué usamos ID y class juntas? Por ejemplo:
<style>
.ejemploCSS {
background-color: #000;
border: 1px solid #CCC;
float: left;
height: 50px;
margin-right: 10px;
padding: 10px;
width: 150px;
}
#ejemploCSS1 {color: white;}
#ejemploCSS2 {color: yellow;}
#ejemploCSS3 {color: red;}
</style>
Tenemos una clase donde hemos definido una serie de propiedades como fondo, bordes y tamaño que aplicaremos a un DIV así que, si colocamos tres, uno al lado del otro, se verán iguales. Ahora bien, le agregaremos un ID a cada uno de ellos para darles una propiedad exclusiva, el color del texto:
<div id="ejemploCSS1" class="ejemploCSS"> ... </div>
<div id="ejemploCSS2" class="ejemploCSS"> ... </div>
<div id="ejemploCSS3" class="ejemploCSS"> ... </div>
Se vería esto:

BLANCO
AMARILLO
ROJO

¿Y qué pasa si hay propiedades contradictorias? Por ejemplo, definimos el color de fondo tanto en la clase como en el ID ¿Cuál se verá? ¿será negro como dice la clase o variará como dicen los IDs?:
<style>
.ejemploCSS {background-color: #000;}
#ejemploCSS1 {background-color: white;}
#ejemploCSS2 {background-color: yellow;}
#ejemploCSS3 {background-color: red;}
</style>
Como se ve, el fondo será el del ID y el de la clase será ignorado.

BLANCO
AMARILLO
ROJO

Claro, uno puede decir, lo que ocurre es que, primero le decimos que es negro y luego le decimos que es de otro color, lo sobrescribimos, es lógico pero, veamos si lo escribimos al revés:
<style>
#ejemploCSS1 {background-color: white;}
#ejemploCSS2 {background-color: yellow;}
#ejemploCSS3 {background-color: red;}
.ejemploCSS {background-color: #000;}
</style>
Ahora ponemos el fondo negro al final ¿qué se verá?

BLANCO
AMARILLO
ROJO

Pués, lo mismo ya que, para decirlo de alguna manera, un ID es "más importante" que una clase (más información). Para hacer que una clase "sobrescriba" una propiedad de un ID, le agregamos la palabra !important:
<style>
.ejemploCSS {background-color: #000 !important;}
#ejemploCSS1 {background-color: white;}
#ejemploCSS2 {background-color: yellow;}
#ejemploCSS3 {background-color: red;}
</style>

BLANCO
AMARILLO
ROJO

8 comentarios:

Unknown  

A tener en cuenta!!!, tengo que aprender sobre el ID de la sidebar...muy bien explicado!!! besos!!!

Responder
Unknown  

De mucha utilidad me sirven estas explicaciones. Gracias JMiur

Responder
Gem@  

Me encantan este tipo de entradas, es mucho más fácil hacerlas con la explicación y listo. Pero los ejemplos son la guinda del pastel :)

Responder
JMiur  

Me alegra que sirva para algo :D

Responder
Manuel de la Fuente  

Me viene de maravillas con los problemas que he estado teniendo.

Responder
Carlos Javier  

Excelente -como siempre- JMiur! Me has aclarado algo que no tenía muy bien entendido hasta ahora. Gracias por eso!

Responder
MartínJug  

Che Jmiur sos groso sabelo!!!

Responder
Schnaizen  

Tremendo!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR