Pseudoclases y pseudoelementos en CSS

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 pseudoclases y pseudoelementos en CSS, que te permitirán identificar estados y puntos específicos dentro de tus elementos HTML.

Pseudoclases en CSS

Las pseudoclases CSS 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 pseudoclases CSS 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 pseudoclases CSS y los estados que seleccionan al insertarse en un selector.

• :link: esta pseudoclase 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 pseudoclase de clases en CSS 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 pseudoclase selecciona un elemento en función del hashtag que está en la URL.
• :lang (): esta pseudoclase 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 de las clases en CSS.
• :only-of-type: selecciona al único elemento de un tipo.
• :not(): esta pseudoclase 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 pseudoclases en CSS. Si quieres conocer cada una de ellas a profundidad, te recomendamos visitar el post sobre pseudoclases en la página oficial de la Mozilla Developer Network.

Pseudoelementos en CSS

Al igual que las pseudoclases en CSS, los pseudoelementos 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 pseudoclases, los pseudoelementos en CSS no identifican un estado, sino que identifican puntos o lugares concretos dentro de un elemento HTML. A continuación, te presentamos los pseudoelementos en CSS más importantes:

• ::first-letter: este pseudoelemento nos permite acceder a la primera línea de un elemento HTML. Por ejemplo, la primera línea de un párrafo.
• ::first-line: este pseudoelemento nos permite acceder a la primera letra de un elemento HTML.
• ::before {content=””}: este pseudoelemento 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 pseudoelemento nos permite acceder al espacio justo después del cierre del elemento HTML.

¿Cómo utilizar los pseudoelementos en CSS ::after y ::before?

Los pseudoelementos 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 pseudoelementos 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 pseudoelementos, al insertarse dentro de un selector podemos agregarles estilos. Sin embargo, los pseudoelementos ::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 pseudoelementos 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 pseudoelementos 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 pseudoclases y pseudoelementos 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!