Una pseudo-clase en CSS es una palabra clave que se añade a un selector para aplicar estilos a un elemento solo cuando este se encuentra en un estado especial.
Gracias ellas podemos dar respuesta visual cuando el visitante interactúa con la página, consiguiendo una experiencia dinámica sin tener que programar ni una sola línea de lógica (solo con las herramientas de CSS).
Vamos a ver las pseudo-clases fundamentales para dar vida a la interfaz. 👇
El estado :hover
La pseudo-clase
Es la herramienta más habitual para indicar visualmente que un elemento es interactivo. La sintaxis es muy sencilla: solo tenéis que añadir la palabra :hover pegada al selector original, sin dejar ningún espacio en blanco.
/* Estado normal del botón */
.boton-enviar {
background-color: blue;
color: white;
}
/* Estado cuando pasamos el ratón por encima */
.boton-enviar:hover {
background-color: darkblue;
cursor: pointer;
}
Cuidado con los dispositivos móviles. Como en una pantalla táctil de un teléfono no existe un “puntero” flotando constantemente, el efecto :hover suele comportarse de forma extraña, quedándose activado después del primer toque.
El estado :focus
El estado Tab del teclado.
Se utiliza de forma extensiva en los formularios. Es la forma de decirle a la persona: “Estás escribiendo en este cajetín, y no en el de abajo”.
/* Estado normal del cajetín de texto */
input {
border: 2px solid gray;
}
/* Estado cuando el usuario hace clic para empezar a escribir */
input:focus {
border: 2px solid blue;
background-color: #f0f8ff;
outline: none;
}
Si decidís quitar el contorno que los navegadores ponen por defecto al hacer foco (el clásico outline: none), debéis sustituirlo por otro estilo bien visible.
Si no lo hacéis, destruiréis la accesibilidad de vuestra web para la gente que navega utilizando el teclado.
El estado :focus-visible
La pseudo-clase :focus. Se activa cuando el navegador considera que conviene mostrar una marca visible de foco, especialmente al navegar con teclado.
Esto nos permite evitar esos contornos que aparecen al hacer clic con el ratón, pero mantener una señal clara para quien se mueve por la página con Tab.
button:focus-visible,
a:focus-visible {
outline: 3px solid #facc15;
outline-offset: 3px;
}
Para interfaces reales, :focus-visible suele ser mejor opción que :focus cuando queréis diseñar el foco de teclado. No elimina la accesibilidad, la hace menos molesta visualmente.
El estado :active
La pseudo-clase
Nos viene muy bien para simular visualmente el hundimiento de un interruptor físico. No cambia la lógica de la página, solo comunica que el clic está ocurriendo.
/* Combinamos varios estados sobre el mismo botón */
.boton-enviar {
background-color: green;
padding: 10px 20px;
}
.boton-enviar:hover {
background-color: darkgreen;
}
.boton-enviar:active {
background-color: lightgreen;
transform: scale(0.95);
}
Estados de enlaces
Los enlaces tienen algunas pseudo-clases propias que vienen de los primeros tiempos de la web. Siguen siendo útiles para diferenciar enlaces normales, visitados o pulsados.
a:link {
color: #2563eb;
}
a:visited {
color: #6d28d9;
}
a:hover {
text-decoration-thickness: 2px;
}
a:active {
color: #dc2626;
}
El orden recomendado para escribirlas es :link, :visited, :hover, :active. Si lo cambiáis alegremente, la cascada puede hacer que unos estilos tapen a otros.
Hoy muchas webs no diferencian visualmente los enlaces visitados, pero :visited puede ser útil en documentación, listados largos o resultados de búsqueda.
Estados de formularios
Los formularios también tienen estados que podemos aprovechar sin JavaScript. Algunos de los más habituales son :checked, :disabled, :required, :valid e :invalid.
input:required {
border-left: 4px solid #f59e0b;
}
input:disabled {
opacity: 0.6;
cursor: not-allowed;
}
input:checked + label {
font-weight: bold;
}
input:invalid {
border-color: #dc2626;
}
Esto permite diferenciar campos obligatorios, opciones seleccionadas, controles deshabilitados o datos incorrectos. Bien usado, ayuda al usuario a entender qué está pasando.
Un poquito de vida, no una discoteca
Las pseudo-clases son una herramienta muy buena para dar respuesta visual. Un botón que cambia al pasar el ratón, un input que destaca al recibir foco o una casilla que marca su etiqueta se sienten mejor que una página totalmente plana.
La clave está en usarlas para ayudar al usuario a entender qué está pasando. Si todo cambia de color, salta, se hunde y brilla cada vez que el ratón pasa cerca, la interfaz deja de comunicar y empieza a hacer ruido.
