Pseudo‑clases en CSS: :hover, :active, :visited y más
Aprende a aplicar, combinar y depurar las pseudo‑clases más útiles del CSS moderno.
¿Qué son las pseudo‑clases?
Una pseudo‑clase es una palabra clave que se añade a un selector para definir un estado especial del elemento al que se aplica. No se refieren a una clase real del HTML, sino a una condición que el navegador evalúa en tiempo de ejecución.
Ejemplos clásicos son :hover (cuando el cursor está sobre el elemento), :active (cuando el elemento está siendo pulsado) y :visited (cuando el enlace ya ha sido visitado).
Comparativa rápida de las pseudo‑clases más usadas
:hover
Se activa cuando el puntero del mouse está sobre el elemento. Ideal para efectos visuales de interacción.
- Compatibilidad: Todos los navegadores modernos.
- Uso típico: Cambiar color, mostrar tooltip, animar transformaciones.
:active
Se dispara mientras el elemento está siendo activado (pulsado). Suele usarse en botones y enlaces.
- Compatibilidad: Todos los navegadores modernos.
- Uso típico: Simular “presión” con sombra o escala.
:visited
Se aplica a enlaces que el usuario ya ha visitado. Tiene limitaciones de privacidad en navegadores modernos.
- Compatibilidad: Todos los navegadores, pero solo propiedades de color.
- Uso típico: Indicar visualmente enlaces leídos.
:focus
Se activa cuando el elemento recibe el foco del teclado o del mouse. Crucial para accesibilidad.
- Compatibilidad: Todos los navegadores.
- Uso típico: Resaltar campos de formulario.
Ejemplos prácticos
A continuación, se presentan snippets listos para copiar y pegar.
/* Cambio de color en hover */
a:hover {
color: #ff5722;
text-decoration: underline;
}
/* Botón con efecto de presión */
.button:active {
transform: scale(0.95);
box-shadow: inset 0 3px 5px rgba(0,0,0,0.2);
}
/* Enlace visitado (solo color) */
a:visited {
color: #6a1b9a; /* Evita usar background para no romper la política de privacidad */
}
/* Enfoque accesible */
input:focus {
outline: 2px solid #2196f3;
background-color: #e3f2fd;
}
Para ver los efectos en tiempo real, abre la consola del navegador y modifica los estilos.
Pseudo‑clases avanzadas y combinaciones
CSS Level 4 introduce pseudo‑clases poderosas que facilitan la escritura de selectores más expresivos.
:focus-visible: Similar a:focuspero solo cuando el foco es visible (útil para diferenciar interacciones de teclado vs. mouse).:is()y:where(): Permiten agrupar selectores y reducir la especificidad.:has()(próximamente en Chrome y Safari): Selecciona un elemento que contiene otro elemento que cumpla una condición.
/* Ejemplo con :is() */
button:is(:hover, :focus, :active) {
background-color: #4caf50;
color: #fff;
}
/* Ejemplo con :focus-visible */
a:focus-visible {
outline: 3px dashed #ff9800;
}
Mejores prácticas y accesibilidad
- Siempre proporcionar un estilo
:focusvisible para usuarios de teclado. - Evitar depender exclusivamente de
:hoveren dispositivos táctiles. - Limitar el uso de
:visiteda cambios de color para cumplir con políticas de privacidad. - Utilizar transiciones suaves para mejorar la experiencia de usuario.
a { transition: color 0.2s ease, text-decoration-color 0.2s ease; }
Depuración de pseudo‑clases
Si un estilo no se aplica, verifica:
- Orden de los selectores: los estilos más específicos o los declarados al final sobrescriben a los anteriores.
- Compatibilidad del navegador:
:visitedsolo permite propiedades de color youtline. - Herramientas de inspección: en Chrome/Firefox, el panel Elements permite forzar el estado
:hover,:activey:focusmediante el botón “Force element state”.
Conclusión
Dominar las pseudo‑clases es esencial para crear interfaces web interactivas, accesibles y con una experiencia de usuario pulida. Aprovecha las nuevas pseudo‑clases de CSS 4 para escribir código más conciso y mantén siempre la accesibilidad como prioridad.
Entendiendo las pseudo‑clases CSS: :hover, :active, :visited y más