Pseudoclases CSS

Las pseudoclases se utilizan para hacer referencia a ciertos comportamientos de los elementos HTML. Así como los combinadores CSS se utilizan para dar estilos dependiendo de donde estén colocados en la estructura del HTML, las pseudoclases se utilizan para dar estilos a elementos respecto al comportamiento que experimentan en determinado momento.

Volvamos a recordar el esquema general de sintaxis de CSS:

Sintaxis avanzada

Las pseudoclases se definen añadiendo dos puntos antes de la pseudoclase concreta. En el caso de existir selectores de etiqueta, id o clases, estas se escribirían a su izquierda.

Pseudoclases de enlaces

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
:link Aplica estilos cuando el enlace no ha sido visitado todavía.
:visited Aplica estilos cuando el enlace ha sido visitado anteriormente.

A continuación veremos un ejemplo donde seleccionamos mediante un simple selector a los enlaces que aún no han sido visitados, cambiando el color de los mismos o su formato, lo que mostrará dichos enlaces de color verde y en negrita:

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

Por otro lado, la pseudoclase :visited puede utilizarse para dar estilo a los enlaces que hayan sido visitados previamente en el navegador del usuario:

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

Pseudoclases de ratón

Originalmente, las siguientes pseudoclases se utilizaban solamente en enlaces (Internet Explorer no los soportaba en otros elementos). Sin embargo, actualmente pueden ser utilizadas con seguridad en cualquier otro elemento, sin necesidad de ser <a>.

Pseudoclase Descripción
:hover Aplica estilos cuando pasamos el ratón sobre un elemento.
:active Aplica estilos cuando estamos pulsando sobre el elemento.

La primera de ellas, :hover, es muy útil e interesante, ya que permite aplicar estilos a un elemento justo cuando el usuario está pasando el ratón 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.

Por otro lado, la segunda pseudoclase, :active, permite resaltar los elementos que se encuentran activos, donde el usuario está pulsando de forma activa con el ratón:

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

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

Pseudoclases de interacción

Existen pseudoclases orientadas principalmente a los campos de formulario de páginas webs y la interacción del usuario con ellos, veamos otro par interesante:

Pseudoclase Descripción
:focus Aplica estilos cuando el elemento tiene el foco.
:checked Aplica estilos cuando la casilla está seleccionada.

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 campo se dice que ese campo tiene el foco, mientras que al pulsar TAB y saltar al siguiente, decimos que pierde el foco.

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

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

Nota: Aunque estas pseudoclases suelen utilizarse con elementos de formularios como <input>, también pueden utilizarse con otros elementos, como por ejemplo los enlaces <a>. Esta es una excelente oportunidad para personalizar el estilo de los campos de texto de un formulario (<input> y <textarea>) mientras el usuario escribe y se mueve por ellos.

Por otro lado, la pseudoclase :checked permite aplicar el estilo especificado a los elementos <input> (casillas de verificación o botones de radio) u <option> (la opción seleccionada de un <select>).

Por ejemplo, se podría utilizar el siguiente fragmento de código:

input:checked + span {
  color: green;
}

Este ejemplo añade el selector hermano + para darle formato al <span> que contiene el texto y se encuentra colocado a continuación de la casilla <input>. De esta forma, los textos que hayan sido seleccionados, se mostrarán en verde.

Pseudoclases de activación

Por norma general, los elementos de un formulario HTML están siempre activados, aunque se pueden desactivar añadiendo el atributo disabled (es un atributo booleano, no lleva valor) al elemento HTML en cuestión. Esto es una práctica muy utilizada para impedir al usuario escribir en cierta parte de un formulario porque, por ejemplo, no es aplicable.

Existen varias pseudoclases para detectar si un campo de un formulario está activado o desactivado:

Pseudoclase Descripción
:enabled Aplica estilos cuando el campo del formulario está activado.
:disabled Aplica estilos cuando el campo del formulario está desactivado.
:read-only Aplica estilos cuando el campo es de sólo lectura.
:read-write Aplica estilos cuando el campo es editable por el usuario.

Utilizando las dos primeras pseudoclases, bastante autoexplicativas por si solas, podemos seleccionar elementos que se encuentren activados (comportamiento por defecto) o desactivados:

/* Muestra en fondo blanco las casillas que permiten escribir */
input:enabled {
  background-color: white;
}

/* Muestra en fondo gris las casillas que no permiten escribir */
input:disabled {
  background-color: grey;
}

Por otro lado, las pseudoclases read-only y read-write nos permiten seleccionar y diferenciar elementos que se encuentran en modo de solo lectura (tienen especificado el atributo readonly en el HTML) o no:

input:read-only {
  background-color: darkred;
  color: white
}

En el ejemplo anterior, la pseudoclase :read-only le da estilo a aquellos campos <input> de un formulario que están marcados con el atributo de sólo lectura readonly. La diferencia entre un campo con atributo disabled y un campo con atributo readonly es que la información del campo con readonly se enviará a través del formulario, mientras que la del campo con disabled no se enviará. Aún así, ambas no permiten modificar el valor.

Nota: Ten en cuenta que :read-only aplicará los estilos a todos los elementos HTML que no puedan ser modificados por el usuario.

Por otro lado, la pseudoclase :read-write es muy útil para dar estilos a todos aquellos elementos que son editables por el usuario, sean campos de texto <input> o <textarea>.

input:read-write {
  background-color: green;
  color: white
}

Nota: La pseudoclase read-write da estilo también a elementos HTML que contengan el atributo contenteditable, como por ejemplo un párrafo editable por el usuario con dicho atributo.

Pseudoclases de validación

En HTML5 es posible dotar de capacidades de validación a los campos de un formulario, pudiendo interactuar desde Javascript o incluso desde CSS. Con estas validaciones podemos asegurarnos de que el usuario escribe en un campo de un formulario el valor esperado que debería. Existen algunas pseudoclases útiles para las validaciones, como por ejemplo las siguientes:

Pseudoclase ¿Cuándo aplica estilos?
:required Cuando el campo es obligatorio, o sea, tiene el atributo required.
:optional Cuando el campo es opcional (por defecto, todos los campos).
:invalid Cuando los campos no cumplen la validación HTML5.
:valid Cuando los campos cumplen la validación HTML5.
:out-of-range Cuando los campos numéricos están fuera del rango.
:in-range Cuando los campos numéricos están dentro del rango.

En un formulario HTML es posible establecer un campo obligatorio que será necesario rellenar para enviar el formulario. Por ejemplo, el DNI de una persona que va a matricularse en un curso, o el nombre de usuario de alta en una plataforma web para identificarse. Campos que son absolutamente necesarios.

Para hacer obligatorios dichos campos, tenemos que indicar en el HTML el atributo required, al cuál será posible darle estilo mediante la pseudoclase :required:

input:required {
  border: 2px solid blue;
}

Por otra parte, los campos opcionales (no obligatorios, sin el atributo required) pueden seleccionarse con la pseudoclase :optional:

input:optional {
  border: 2px solid grey;
}

Las validaciones en formularios HTML siempre han sido un proceso tedioso, hasta la llegada de HTML5. HTML5 brinda un excelente soporte de validaciones desde el lado del cliente, pudiendo comprobar si los datos especificados son correctos o no antes de realizar las validaciones en el lado del servidor, y evitando la latencia de enviar la información al servidor y recibirla de vuelta.

Ojo: Ten en cuenta que la validación de cliente es apropiada solo para reducir la latencia de envío/recepción al servidor, pero nunca como estrategia para evitar problemas de seguridad o similares, para la cuál se debe tener validación en el servidor siempre. Las validaciones utilizadas en frontend, es posible falsearlas o saltárselas.

Imaginemos un campo de entrada en el que queremos obtener la edad del usuario. Nuestra intención es que solo se puedan introducir números. Para ello hacemos uso de la expresión regular [0-9]+, que significa «una o más cifras del 0 al 9»:

<input type="text" name="age" pattern="[0-9]+" />

Sin embargo, el atributo pattern permite expresiones regulares realmente complejas, como por ejemplo, una expresión regular para validar el formato de un DNI, ya sea en el formato nacional de España (12345678L) o en formato NIE (X1234567L), aceptando guiones si se indican:

<input type="text" name="dni"
       pattern="(([X-Z]{1})([-]?)(\d{7})([-]?)([A-Z]{1}))|((\d{8})([-]?)([A-Z]{1}))" />

Se pueden aplicar ciertos estilos dependiendo de si se cumple o no el patrón de validación, utilizando las siguientes pseudoclases:

input:invalid {
  background-color: darkred;
  color: white;
}

input:valid {
  background-color: green;
  color: white;
}

Sin embargo, en la validación numérica que vimos anteriormente, un usuario podría escribir 500, que es una edad imposible, porque en el patrón de validación indicamos «una o más cifras del 0 al 9». Lo ideal sería establecer un rango, algo que se suele hacer muy a menudo si tenemos campos numéricos de formulario:

<input type="number" name="age" min="18" max="100" />

Este campo permite al usuario especificar su edad, utilizando los atributos de validación min y max, que sólo permiten valores entre 18 y 100 años. Los valores fuera de este rango, no serán válidos.

De la misma forma que antes, es posible aplicar estilos para los valores fuera de rango, como dentro de rango:

input:out-of-range {
  background-color: darkred;
  color: white;
}

input:in-range {
  background-color: green;
  color: white;
}

Pseudoclases de negación

Existe una pseudoclase muy útil, denominada pseudoclase de negación. Permite seleccionar todos los elementos que no cumplan los selectores indicados entre paréntesis.

Veamos un ejemplo:

p:not(.general) {
  border: 1px solid #DDD;
  padding: 8px;
  background: #FFF;
}

Este pequeño fragmento de código nos indica que todos los párrafos (elementos <p>) que no pertenezcan a la clase general, se les aplique el estilo especificado.

Consejo: Las reglas de negación pueden ser complejas, ineficientes y poco escalables. Intenta utilizarlas sólo en los casos que sea absolutamente necesario.

Otras pseudoclases

Para finalizar el apartado de pseudoclases, quiero mencionar algunas que no encajan en los apartados anteriores, pero que pueden ser muy útiles en algunos casos:

Pseudoclase Significado
:lang(es) Aplica estilo a los elementos con el atributo lang="es".
:target Aplica estilo al elemento que coincida con el ancla de la URL.
:root Aplica estilo al elemento raíz (padre) del documento.
:default Experimental. Aplica estilo al elemento por defecto. Útil en formularios.
:dir(A) Experimental. Aplica estilo al elemento que coincide con la dirección ltr o rtl.
:indeterminate Experimental. Aplica estilo a la casilla checkbox o al elemento <progress> sin definir.
:fullscreen Experimental. Aplica estilo si la página está en el modo de pantalla completa.
:scope Experimental. Aplica estilo a los elementos en el ámbito indicado.
:any(A) Experimental. Aplica estilo si coincide con algún elemento indicado en A.

Otras pseudoclases como :first, :left, :right o :blank las mencionamos en el capítulo de medios paginados.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Autor de Emezeta.com, es profesor en la Universidad de La Laguna y dirige el curso de Programación web FullStack y Diseño web FrontEnd de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.