Pseudo-clases y pseudo-elementos en CSS

Autor: | Última modificación: 9 de junio de 2022 | Tiempo de Lectura: 4 minutos
Temas en este post: ,

Las clases en CSS nos permiten identificar elementos de manera general para posteriormente modificar sus estilos. Sin embargo, en el proceso de diseño de una página web, a veces necesitamos ser más específicos con lo que queremos estilizar. Por ello, en este post, te presentamos las pseudo-clases y pseudo-elementos en CSS, que te permitirán identificar estados y puntos específicos dentro de tus elementos HTML.

Pseudo-clases en CSS

Las pseudo-clases son palabras clave que podemos añadir a los selectores para identificar un estado en nuestros elementos HTML. Esto quiere decir que los podemos insertar cuando queremos estilizar un elemento que se encuentre en un estado específico. Lo que nos permiten las pseudo-clases es identificar elementos no solo de acuerdo al árbol del código, cómo lo hacen los selectores básicos y selectores múltiples de CSS, pero también de acuerdo a factores como el historial de navegador y el movimiento del ratón.

Si tienes dudas sobre qué tipos de selectores existen, te invitamos a leer nuestros posts sobre selectores básicos y selectores múltiples en CSS.

A continuación, te presentamos algunas de las pseudo-clases que existen en CSS y los estados que seleccionan al insertarse en un selector.

  • :link: esta pseudo-clase selecciona un enlace.
  • :visited: selecciona un enlace que se ha visitado.
  • :active: selecciona un enlace que está activo.
  • :focus: selecciona un enlace que tiene el foco.
  • :checked: esta pseudo-clase puede ser útil en formularios, pues nos permite dar un estilo diferente cuando un elemento está seleccionado en la lista.
  • :hover: selecciona un elemento que tiene el ratón encima.
  • :target: esta pseudo-clase selecciona un elemento en función del hashtag que está en la URL.
  • :lang (): esta pseudo-clase selecciona en función de un idioma.
  • :nth-child (n): selecciona un número concreto de un hijo. Por ejemplo, podemos seleccionar un elemento que es el décimo hijo de su elemento padre.
  • :first-child: selecciona al primer hijo de un elemento padre.
  • :last-child: selecciona al último hijo de un elemento padre.
  • :only-child: selecciona al único hijo de un elemento padre.
  • :nth-of-type (n): selecciona un número concreto entre los elementos de un mismo tipo.
  • :first-of-type: selecciona al primer elemento de un tipo.
  • :last-of-type: selecciona al último elemento de un tipo.
  • :only-of-type: selecciona al único elemento de un tipo.
  • :not(): esta pseudo-clase nos permite aplicar estilos justo cuando es lo contrario. Por ejemplo, lo podríamos usar cuando queremos aplicar un estilo a un enlace cuando no está activo.

Hay muchas más pseudo-clases en CSS. Si quieres conocer cada una de ellas a profundidad, te recomendamos visitar el post sobre pseudo-clases en la página oficial de la Mozilla Developer Network.

Pseudo-elementos en CSS

Al igual que las pseudo-clases, los pseudo-elementos en CSS nos permiten ser más específicos a la hora de seleccionar a qué le vamos a aplicar un estilo. A diferencia de las pseudo-clases, los pseudo-elementos en CSS no identifican un estado, sino que identifican puntos o lugares concretos dentro de un elemento HTML. A continuación, te presentamos los pseudo-elementos en CSS más importantes:

  • ::first-letter: este pseudo-elemento nos permite acceder a la primera línea de un elemento HTML. Por ejemplo, la primera línea de un párrafo.
  • ::first-line: nos permite acceder a la primera letra de un elemento HTML.
  • ::before {content=»»}: permite acceder al espacio justo antes de la apertura de un elemento HTML. En el caso de un párrafo, nos permitirá acceder al espacio justo antes de la etiqueta <p>.
  • ::after {content=»»}: este pseudo-elemento nos permite acceder al espacio justo después del cierre del elemento HTML.

¿Cómo utilizar los pseudo-elementos en CSS ::after y ::before?

Los pseudo-elementos en CSS ::after y ::before nos permiten acceder a una parte del elemento que no existe por defecto. Por ello, requieren que les insertemos la etiqueta <content> para que puedan existir. Como hemos visto en la lista de pseudo-elementos en CSS, la etiqueta content puede estar vacía o puede contener lo que queramos, lo importante es que esté presente dentro del elemento.

Al igual que los demás pseudo-elementos, al insertarse dentro de un selector podemos agregarles estilos. Sin embargo, los pseudo-elementos ::after y ::before son especiales porque, para que veamos los efectos de estos estilos, primero debemos otorgarle características de posición y tamaño. Sin estas características, son tan solo un elemento vacío en línea.

Entonces, ¿para qué sirven estos pseudo-elementos en CSS? Nos permiten crear iconos y rayas justo antes o después de los elementos. Podemos utilizar este espacio para pintar letras a modo de icono justo antes o después de títulos, párrafos y todo tipo de elementos. También podemos crear rayas que dividan nuestro espacio para resaltar una imagen o un elemento multimedia.

Para conocer más sobre el tema, puedes leer el post sobre pseudo-elementos en CSS de Mozilla Developer Network.

¿Cuál es el siguiente paso?

Después de leer este post ya sabes qué son y cómo funcionan las pseudo-clases y pseudo-elementos en CSS. Ahora que conoces cómo utilizarlas para identificar estados y puntos específicos dentro de tus elementos HTML, ¡es hora de que los pongas en práctica en tu propia página web! Por ello, te recomendamos el Desarrollo Web Full Stack Bootcamp, un bootcamp intensivo de KeepCoding. Allí, entre muchas otras cosas, seguirás aprendiendo acerca de CSS y HTML. Al final, usarás todos los conocimientos adquiridos para crear tu propia página web adaptable para dispositivos móviles y ordenadores. ¡No te pierdas la oportunidad de seguir aprendiendo e inscríbete ahora!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!