¿Qué son las pseudoclases?

Formas de seleccionar elementos por comportamiento


Hasta ahora hemos visto como trabajar con selectores básicos y combinadores, sin embargo, CSS ofrece más formas de seleccionar elementos HTML, y una de ellas son las llamadas pseudoclases.

¿Qué es una pseudoclase CSS?

Las pseudoclases se utilizan para hacer referencia a elementos HTML que tengan un cierto comportamiento concreto. Volvamos a recordar el esquema general de sintaxis de CSS, donde ahora añadiremos las pseudoclases, que se definen añadiendo dos puntos antes del nombre de la pseudoclase concreta, de la siguiente forma:

Sintaxis avanzada

De esta forma, podremos seleccionar elementos que en principio parecen iguales, pero tienen diferentes características de comportamiento. Para entenderlo bien, vamos a ver las categorías o tipos de pseudoclases y ver cuales se encuentran entre ellas.

Ejemplo de una pseudoclase

La forma de utilizar pseudoclases en nuestro código CSS es, simplemente, añadir : tras la etiqueta o selector y luego añadir el nombre de la pseudoclase. Por ejemplo, una de las pseudoclases más populares, que veremos en el próximo artículo, es :hover.

Cuando utilizamos la pseudoclase :hover, estamos indicando al navegador que de estilo al elemento cuando el usuario coloque su ratón (o dispositivo apuntador) encima de ese elemento.

Veamos un ejemplo, con una etiqueta <a> de enlace:

a {
  padding: 5px;
}

a:hover {
  background: red;
  color: white;
  text-decoration: none;
}
<p>Mueve el ratón sobre este <a href="https://manz.dev/">enlace</a>.</p>

En este caso hacemos lo siguiente:

  • El enlace siempre tendrá un padding de 5 píxeles.
  • El enlace tendrá color rojo de fondo, color blanco de texto y no tendrá subrayado cuando el usuario mueva el ratón por encima.

Existen multitud de pseudoclases CSS, y profundizaremos más sobre ellas en los siguientes artículos.

Tipos de pseudoclases CSS

Existen múltiples pseudoclases, así que para entenderlas mejor, las categorizamos en las siguientes secciones. Aquellas que sean muy extensas o abundantes, las enlazaremos en un artículo posterior más detallado:

PseudoclaseSignificadoMás información
InteracciónPseudoclases relacionadas con acciones de usuario.Ver más abajo, en esta página.
:hover, :active, :focus, :focus-within, :focus-visible
UbicaciónPseudoclases relacionadas con enlaces o ubicaciones.Ver pseudoclases de ubicación
:any-link, :link, :visited, :target
IdiomaPseudoclases relacionadas con idiomas.Ver pseudoclases de idioma
:lang(), :dir()
EstructuraPseudoclases de estructura de documentos HTMLVer pseudoclases de estructura
:root, :host, :defined, :empty
:first-child, :last-child, :only-child
:first-of-type, :last-of-type, :only-of-type
:nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type()
FormularioPseudoclases de formularios HTMLVer pseudoclases de formularios
:checked, :indeterminate
:enabled, :disabled, :read-only, :read-write, :placeholder-shown, :default
:required, :optional, :valid, :invalid, :user-valid, :user-invalid
:in-range, :out-of-range
EstadoPseudoclases relacionadas con el estado de modales o similares.Ver pseudoclase de estado
:fullscreen, :modal
PaginadoPseudoclases de paginado de documentos HTMLVer pseudoclases de paginado
:first, :left, :right, :blank

En los siguientes temas aprenderemos a utilizar las pseudoclases de cada categoría.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev