Clases e identificadores CSS

Clases

Para seleccionar todos los elementos que tienen la misma clase class podemos utilizar como prefijo un punto ( . ) seguido por el nombre de la clase que queremos seleccionar:

.conClase{padding:1em;}

Un elemento HTML puede tener más de una clase. Para seleccionar aquellos elementos html que tienen una cierta combinación de clases podemos utilizar selectores concatenados:

.clase1.clase2{margin-top:0;}

En el caso en el cual hay varios elementos con diferentes nombres de etiqueta pero con la misma clase podemos seleccionar solo aquellos elementos que tienen la misma etiqueta ( ul en este caso ):

ul.navigacion{list-style:none}

Una clase puede tener cualquier nombre que empieza con una letra o un guion ( - ) o un guion bajo ( _ ). Aunque podemos utilizar números, un numero no puede ser ni el primer carácter, ni el segundo carácter después de un guión.
Es interesante saber que podemos utilizar caracteres especiales como nombres de clases si utilizamos el código hexadecimal del carácter especial precedido por el carácter de escape ( \ ) así:

<p class="€">Clases con caracteres especiales</p>

.\020ac::after{content:" \020ac"}

Donde \020ac es el código hexadecimal del símbolo €

Además podemos utilizar símbolos sin codificar como nombres de clases aunque parece que esto hace fallar el PHP Unicode Characters for Class Names

Identificadores

Para seleccionar un elemento que tiene un cierto identificador id podemos utilizar el prefijo # ( almohadilla ) seguido por el nombre del identificador que queremos seleccionar:

#el_Id{text-decoration:underline;}

Los identificadores son únicos. No pueden haber dos identificadores iguales en el mismo documento HTML. Si por alguna razón aparecen dos identificadores iguales, aun así los estilos CSS serán aplicados a los dos elementos. Sin embargo en javascript solo el primer elemento será seleccionado.

Exactamente como en el caso de las clases un identificador puede tener cualquier nombre que empieza con una letra o un guion ( - ) o un guion bajo ( _ ). Es interesante saber que podemos utilizar caracteres especiales como nombres de clases si utilizamos el código hexadecimal del carácter especial precedido por el carácter de escape ( \ ) así:

<p id="£"> Clases con caracteres especiales</p>

.\0a3::after{content:" \0a3"}

Donde \0a3 es el código hexadecimal del símbolo £

También en el caso de los identificadores podemos utilizar símbolos sin codificar aunque parece que esto hace fallar el PHP Unicode Characters for Class Names

El Selector comodín

Para seleccionar todos los elementos de un documento HTML utilizamos un asterisco *

*{ box-sizing:border-box; }