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 (
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 (
-
) 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
\
) 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; }
No hay comentarios.:
Publicar un comentario