Pseudoclases

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:

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.

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:

Pseudoclase	Más información
Interacción	Pseudoclases relacionadas con acciones de usuario. Ver más adelante en esta página.
Ubicación	Pseudoclases relacionadas con enlaces o ubicaciones. Ver más adelante en esta página.
Idioma	Pseudoclases relacionadas con idiomas. Ver más adelante en esta página.
Estructura	Ver pseudoclases de estructura de documentos HTML
Formulario	Ver pseudoclases de formulario HTML
Estado	Pseudoclases relacionadas con el estado de modales o similares. Ver más adelante en esta página.
Paginado	Ver pseudoclases de paginado de documentos HTML

Veamos algunas de estas secciones a continuación.

Pseudoclases de interacción

Las pseudoclases de interacción se pueden utilizar en cualquier elemento, aunque lo más frecuente es usarlo en elementos interactivos como enlaces, botones o similares, y pueden seleccionar elementos cuando ocurre una cierta interacción por parte del usuario en ellos. ¿Qué tipo de interacción es esa? Pueden ser varias:

Pseudoclase	Descripción
:hover	Selecciona el elemento si el usuario pasa el ratón sobre dicho elemento.
:active	Selecciona el elemento si el usuario se encuentra pulsando dicho elemento.
:focus	Selecciona el elemento cuando tiene el foco (está en primer plano).
:focus-within	Selecciona el elemento si uno de sus miembros hijos ha ganado el foco.
:focus-visible	Selecciona el elemento cuando tiene el foco sólo de forma visible (TAB, por ejemplo).

Pseudoclase :hover

La primera de ellas, :hover, es muy útil e interesante, ya que permite aplicar estilos a un elemento justo cuando el usuario pasa el ratón (o más concretamente, un dispositivo apuntador) sobre él. Es una de las pseudoclases más utilizadas:

/* Usuario mueve el ratón sobre un enlace */
a:hover {
  background-color: cyan;
  padding: 2px
}

/* Usuario mueve el ratón sobre un div y resalta todos los enlaces que contiene */
div:hover a {
  background-color: steelblue;
  color: white;
}

Observese que podemos realizar acciones un poco más específicas, como el segundo ejemplo anterior, donde al movernos sobre un elemento div (div:hover), aplicaremos los estilos a los enlaces (a) que están dentro del mencionado div.

Pseudoclase :active

Por otro lado, la segunda pseudoclase, :active, permite resaltar los elementos que se encuentran activos, o lo que es lo mismo, elementos que están siendo pulsados en ese instante con el ratón por el usuario:

a:active {
  border: 2px solid #FF0000;
  padding: 2px
}

Es importante destacar que esta pseudoclase no puede encargarse de detectar pulsación con persistencia, es decir, no guarda el estado de «ha sido pulsado», sino que sólo es capaz de detectar este comportamiento en el momento justo de ser pulsado. Si necesitamos persistencia, tendríamos que hacer uso de Javascript.

Nota: Aunque estas pseudoclases se inventaron para interactuar con un ratón en un sistema de escritorio, pueden llegar a funcionar en dispositivos táctiles. Aún así, ten en cuenta que el :hover no tiene demasiado sentido en el contexto de dispositivos móviles, ya que un usuario no navega por móvil arrastrando el dedo por la pantalla continuamente.

Pseudoclase :focus

Cuando estamos escribiendo en un campo de texto de un formulario de una página web, generalmente pulsamos TAB para cambiar al siguiente campo y SHIFT+TAB para volver al anterior. Cuando estamos posicionados en un elemento, se dice que ese elemento tiene el foco, mientras que al pulsar TAB y saltar a otro, solemos decir que pierde el foco. También es posible ganar o perder el foco pulsando con el ratón en un elemento.

El comportamiento de «ganar el foco» puede gestionarse mediante la pseudoclase :focus:

/* El campo ha ganado el foco */
input:focus {
  border: 2px dotted #444
}

Estas pseudoclases suelen utilizarse con elementos de formularios como <input>, <textarea> o similares, pero también pueden utilizarse con otros elementos, como por ejemplo enlaces <a>. Esta es una excelente oportunidad para personalizar el estilo de los campos de texto de un formulario (<input> y <textarea>) para que cambien cuando el usuario escribe y se mueve por ellos.

La pseudoclase :focus tiene dos variaciones concretas, las explicaremos a continuación.

Pseudoclase :focus-within

La pseudoclase :focus-within permite darle estilo no sólo al elemento que tiene el foco, sino también a los elementos contenedores relacionados con el elemento que gana el foco. En este ejemplo, :focus-within permite que cuando uno de los campos <input> del formulario gane el foco, podamos iluminar también el elemento label, que es su contenedor:

<style>
  form :focus-within {
    background: yellow;
  }
</style>

<form>
  <label>Name: <input type="text"></label>
  <label>Email: <input type="text"></label>
</form>

Pseudoclase :focus-visible

En el caso de la pseudoclase :focus-visible es prácticamente idéntico a :focus, solo que podemos aplicar estilos al elemento que gana el foco, pero sólo cuando se ha ganado el foco exclusivamente de forma visible, como por ejemplo, pulsando la tecla TAB y accediendo al elemento. Esto puede resultar muy útil cuando quieres que el foco coincida con un tema visual para la página.

Pseudoclases de ubicación

Existen algunas pseudoclases orientadas a los enlaces o hipervínculos. En este caso, permiten cambiar los estilos dependiendo del comportamiento del enlace:

Pseudoclase	Descripción
:any-link	Selecciona un elemento que es un enlace.
:link	Selecciona un elemento que es un enlace no visitado aún.
:visited	Selecciona un elemento que es un enlace visitado anteriormente.
:target	Selecciona un elemento que coincide con el ancla de la URL actual.

Pseudoclase :any-link

Con la pseudoclase :any-link se puede hacer referencia, como dice su nombre, a elementos que sean cualquier tipo de enlaces. En este caso, y si no se delimitan de alguna forma, incluye etiquetas <a> y <area>, ya que ambas se consideran enlaces.

:any-link {
  background: indigo;
  color: white;
  padding: 5px;
}

Pseudoclase :link

Por otro lado, la pseudoclase :link permite seleccionar enlaces a páginas que aún no han sido visitadas por el navegador del usuario, lo que puede ser interesante para personalizar el color de este tipo de enlaces. Por defecto, estos enlaces sin visitar suelen ser de color azul.

Veamos un ejemplo donde los cambiamos:

a:link {
  color: green;
  font-weight: bold
}

Pseudoclase :visited

También tenemos la pseudoclase :visited, que se utiliza para seleccionar y dar estilo a los enlaces que hayan sido visitados previamente en el navegador del usuario. Por defecto, estos enlaces suelen ser de color violeta.

a:visited {
  color: purple;
  font-weight: bold;
}

Pseudoclase :target

Con la pseudoclase :target podemos seleccionar un elemento HTML donde su id (ancla) coincida con el ancla que tenemos actualmente en la URL de navegación. Es decir, si en nuestra URL tenemos el ancla #section1, entonces se seleccionará el elemento con id="section1":

:target {
  background: gold;
  color: #333;
  padding: 5px;
}

Ideal para seleccionar cabeceras de secciones a modo de ancla en un documento HTML.

Pseudoclases de idioma

Pseudoclase	Significado	Más información
:lang(es)	Selecciona elementos con el idioma español, es decir, atributo lang="es".
:dir(value)	Selecciona elementos con la dirección indicada (ltr o rtl).

Pseudoclase :lang()

El atributo HTML lang permite indicar en una etiqueta HTML el idioma en el que está el contenido de sus elementos hijos. De esta forma, un atributo lang="es" indica que el contenido de esa etiqueta se encuentra generalmente en español.

La pseudoclase :lang() acepta por parámetro un idioma (o una lista de ellos separados por comas) para seleccionar el elemento HTML que coincida con uno de ellos:

:lang(es) {
  /* Selecciona el elemento que tenga el idioma español */
}

:lang(es, es-*, en, en-*) {
  /* Selecciona elementos que estén en español (*y relacionados*) o en inglés (*y relacionados*) */
}

Además, como se puede ver en el ejemplo anterior, también se pueden utilizar asteriscos a modo de comodín.

Pseudoclase :dir()

La pseudoclase :dir() permite seleccionar elementos dependiendo de la dirección que tienen establecida. Generalmente, la direccionalidad del texto se establece con el atributo dir, indicándole el valor ltr (left to right) o el valor rtl (right to left), sin embargo, con valores como auto o sin valores indicados, también tendrán una direccionalidad dependiendo del lenguaje establecido en el documento o fragmento.

:dir(ltr) {
  border-left: 4px solid darkred;
}

:dir(rtl) {
  border-right: 4px solid darkred;
}

Ten en cuenta que la diferencia entre :dir(ltr) y [dir="ltr"] es que en el primer caso se selecciona al elemento tanto si tiene el valor ltr como si no lo tiene, pero lo hereda por contexto. Sin embargo, con [dir="ltr"] sólo se selecciona si está indicado explícitamente.

Pseudoclases de estado

Existen una serie de pseudoclases para comprobar el estado visual de un elemento que se considera modal, es decir, que «centran» la interacción del usuario en un elemento principal (y sus hijos) y no permiten la interacción con otros elementos hasta que se cierre ese elemento principal.

Estas pseudoclases son las siguientes:

Pseudoclase	Descripción
:fullscreen	Selecciona si la página está en modo de pantalla completa.
:modal	Selecciona el elemento que es de tipo modal.

Expliquemos un poco cada una de ellas.

Pseudoclase :fullscreen

Mediante la pseudoclase :fullscreen podemos seleccionar elementos que se encuentren en modo pantalla completa, lo que habitualmente se realiza mediante la API FullScreen de Javascript.

<div class="screen" open>
  <p>Colocar esta ventana en pantalla completa</p>
  <button class="close">Close</button>
</div>

<button class="open">FullScreen</button>

<script>
const button = document.querySelector(".open");
const close = document.querySelector(".close");
const screen = document.querySelector(".screen");

button.addEventListener("click", () => screen.requestFullscreen());
close.addEventListener("click", () => document.exitFullscreen());
</script>

<style>
.screen {
  display: none;
}

:fullscreen {
  display: block;
  background: white;
  border: 3px solid red;
}
</style>

Pseudoclase :modal

Mediante la pseudoclase :modal se puede seleccionar un elemento que está actuando como una ventana o elemento modal, o lo que es lo mismo, un elemento que centra la atención del usuario y no permite interacción con otros elementos que no son sus hijos.

En el ejemplo anterior, modificando :fullscreen por :modal continuaría siendo válido y funcionando porque un elemento a pantalla completa con .requestFullscreen() también es un elemento modal, ya que no permite interacción con otros elementos fuera de él hasta que se cierre el modo pantalla completa.

También ten en cuenta que existe la posibilidad de que múltiples elementos sean modales, aunque sólo uno de ellos sea el que se encuentre activo y capaz de recibir interacciones.