Las pseudoclases CSS permiten seleccionar elementos dependiendo de su comportamiento en el navegador. La más conocida es :hover.

Las pseudoclases se utilizan para hacer referencia a ciertos comportamientos de los diferentes elementos del documento HTML. Así como los selectores básicos y avanzados se utilizan para dar estilos dependiendo de donde estén colocados estructuralmente, las pseudoclases se utilizan para dar estilos a elementos respecto al comportamiento que experimentan en determinado momento.

Recordemos 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.

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
}

Ratón

Aunque en un principio, las siguientes pseudoclases se utilizaban solamente en enlaces (navegadores como Internet Explorer no los interpretaban con otros elementos), actualmente pueden ser utilizadas con muchos otros elementos y no sólo con los enlaces <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:

a:hover {
    background-color:cyan;
    padding:2px
}

Consejo: La pseudoclase :hover es una de las más importantes y utilizadas, ya que permite un método de interacción con el usuario cómodo, sencillo y potente.

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
}

Interacción del usuario

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:

input:focus {
    border:2px dotted #444
}

Nota: Aunque estas pseudoclases suelen utilizarse con elementos de formularios como <input>, pueden utilizarse con otros elementos, como por ejemplo los enlaces <a>.

Esta es una excelente opción para destacar y personalizar el estilo de los campos de texto de un formulario (<input> y <textarea>) mientras el usuario está escribiendo en 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 puede utilizar este código:

input:checked + span {
    background-color:orange;
    padding:4px;
}

En el ejemplo anterior se añade el selector hermano (+) para darle formato al span que contiene el texto en lugar de la casilla input. De esa forma, obtenemos algo similar a esto:

Pseudoclase :checked

Campos activados/desactivados

Por norma general, los elementos de un formulario HTML están siempre activados, aunque se pueden desactivar añadiendo el atributo disabled 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á activo o no:

Pseudoclase Descripción
:enabled Aplica estilos cuando el campo del formulario está activado.
:disabled Aplica estilos cuando el campo del formulario está desactivado.

Utilizando la pseudoclase :enabled podemos seleccionar los elementos que no estén desactivados y permitan interactuar con el usuario y así cambiar su estilo. Por otro lado, a los elementos desactivados, se les puede dar formato utilizando la pseudoclase :disabled:

input:enabled {
    color:black;
}

input:disabled {
    background-color:grey;
}

Elementos de sólo lectura/escritura

Los elementos HTML de un formulario suelen ser modificables por el usuario (campos de texto, casillas de verificación, listas de selección, etc...), sin embargo, dichos campos con atributos como disabled o readonly dejan de ser modificables. En ambos casos, los campos pasan a ser campos que no se pueden modificar. Existen varias pseudoclases para modificar sus estilos dependiendo de su naturaleza:

Pseudoclase Descripción
:read-only Aplica estilos cuando el campo es de sólo lectura.
:read-write Aplica estilos cuando el campo es editable por el usuario.

Las siguientes pseudoclases nos permiten seleccionar y diferenciar este tipo de elementos:

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.

Nota: 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á, mientras que la del campo con disabled no se enviará.

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.

Validaciones HTML5

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 Descripción
:required Aplica estilos a los campos del formulario que son obligatorios.
:optional Aplica estilos a los campos del formulario que son opcionales.
:invalid Aplica estilos a los campos que no cumplen la validación HTML5.
:valid Aplica estilos a los campos que cumplen la validación HTML5.
:out-of-range Aplica estilos a los campos numéricos que están fuera del rango.
:in-range Aplica estilos a los campos numéricos que 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 habían 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 y recibirla de vuelta.

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 su formato nacional (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 puede 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
}

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 una clase general, se les aplique el estilo especificado.

Consejo: Las reglas de negación suelen ser bastante complejas, ineficientes y poco escalables. Un buen consejo es utilizarlas sólo en casos muy concretos.

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.
Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).