Comúnmente se suele decir indistintamente pseudo-clases o pseudo-elementos, pero aunque su objetivo sea el mismo, el de ampliar nuestra capacidad de especificar aquello que necesitamos seleccionar cuando no podemos hacerlo a través de los selectores habituales (class, ID o selector de atributos), hay una leve diferencia entre ambos. Mientras los pseudo-elementos aplican para seleccionar o agregar contenido a un elemento, las pseudo-clases nos permiten seleccionar dicho elemento bajo determinadas condiciones.
Son nuestro pan de cada día a la hora de aplicar estilos a nuestros proyectos y por ello vamos a hacer un repaso de su funcionalidad y casos de uso.
Están formadas por dos puntos (:) más una palabra clave (por ej.: first-child) y se utilizan para aplicar estilos a un elemento cuando se encuentre en un estado determinado. Por ejemplo al pasar el puntero sobre un link o cuando queremos seleccionar el primer item de un listado, etc.
*Para este articulo repasamos los de uso más común, pero podemos ver un listado completo aquí.
|
:active |
Selecciona el link activo |
|
:checked |
Selecciona los <input> de tipo radio o checkbox como también <option> dentro de un select que está marcado o conmutado a un estado |
|
:empty |
Selecciona cada elemento seleccionado que no tiene hijos |
|
:first-child |
Selecciona cada elemento seleccionado que sea primer hijo de su padre. Ver ampliado |
|
:first-of-type |
Selecciona el primer elemento de tipo seleccionado dentro de un contenedor. Ver ampliado |
|
:focus |
Selecciona el elemento cuando esta en foco |
|
:hover |
Selecciona enlaces al pasar el ratón por encima |
|
:invalid |
Selecciona todos los elementos seleccionados con un valor no válido |
|
:last-child |
Selecciona el ultimo elemento seleccionado que sea primer hijo de su padre. Ver ampliado |
|
:last-of-type |
Selecciona el ultimo elemento de tipo seleccionado dentro de un contenedor. Ver ampliado |
|
:link |
Selecciona todos los enlaces no visitados |
|
:not(selector) |
Selecciona cualquier elemento que no sea el seleccionado |
|
:nth-child(n) |
Selecciona uno o más elementos en función de su posición entre un grupo de hermanos |
|
:optional |
Selecciona elementos sin el atributo "required" |
|
:required |
Selecciona elementos que posean el atributo "required" |
En CSS 2, la sintaxis de las pseudo-clases y los pseudo-elementos era la misma, el nombre de la etiqueta seguido de dos puntos y del nombre del pseudo-elemento o de la pseudo-clase. Pero en la recomendación de CSS 3 Selectores, se modificó la notación de los pseudo-elementos a etiqueta::pseudo-elemento (el nombre de la etiqueta seguido dos veces de dos puntos y del nombre del pseudo-elemento) para distinguir unos de otros, pero permitiendo utilizar también la antigua notación.
*Para este articulo repasamos los de uso más común, pero podemos ver un listado completo aquí.
|
::after |
Inserta algo después del contenido del elemento |
|
::before |
Inserta algo antes del contenido del elemento |
|
::first-letter |
Selecciona la primer del elemento |
|
::first-line |
Selecciona la primer linea del elemento |
|
::selection |
Selecciona la parte de un elemento seleccionada por el usuario |
El objetivo de este breve repaso es servir de material de consulta rápida a la hora de aplicar nuestros estilos. Como hemos podido ver, el abanico de opciones con el que contamos es muy amplio y es bueno tenerlo en cuenta para evitar malas practicas como la de aplicar estilos inline.
Colaborador oficial
del programa:
Recursos para pymes
y autónomos
frente
al COVID-19
Agregar nuevo comentario