Front.id

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.

Pseudo-clases:

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 `on`
: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"

Pseudo-elementos:

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

Conclusion

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.

Front.id

Pseudo-clases:

Pseudo-elementos:

Conclusion

Add new comment

Restricted HTML