Cuando construyes una interfaz de selección, como elegir un personaje en un juego, el usuario necesita feedback visual inmediato para saber qué eligió. Aprender a usar pseudoclases en CSS y el selector de hermano adyacente resuelve ese problema sin tocar JavaScript, y es una habilidad clave para cualquier desarrollador front.
Por qué las pseudoclases mejoran la experiencia de usuario
En la pantalla de selección de Mokepón faltaba un detalle importante: nada indicaba cuál tarjeta estaba elegida hasta llegar a la siguiente vista. Ese pequeño vacío rompe la confianza del jugador con la interfaz.
Las pseudoclases son selectores especiales que reaccionan a acciones o estados del usuario sobre el HTML. Se identifican con dos puntos después del selector y permiten cambiar estilos sin recargar ni programar lógica adicional.
¿Qué es una pseudoclase en CSS? Es un selector que aplica estilos según el estado de un elemento, como cuando el usuario pasa el mouse, hace clic o marca un input. Se escribe con dos puntos: selector:estado.
Las tres pseudoclases más usadas en interacción son:
- hover: se activa cuando pasas el mouse sobre un elemento.
- active: se activa mientras haces clic sobre el elemento.
- checked: se activa cuando un input tipo radio o checkbox está seleccionado.
Para este caso, checked [3:00] es la protagonista, porque detecta cuándo el jugador eligió una tarjeta.
Cómo detectar un input seleccionado con :checked
El HTML del juego ya tenía la estructura correcta: un label seguido de un input por cada Mokepón. El input estaba oculto con display: none para que solo se viera la tarjeta visual.
El primer paso fue comentar temporalmente esa línea para ver los inputs y confirmar que funcionaban. Luego, en CSS, se aplicó la pseudoclase así:
css
input:checked {
width: 100px;
}
Al recargar el navegador y hacer clic en una tarjeta, el ancho del input cambiaba al instante, confirmando que el estado checked se detectaba correctamente [4:30]. Ese fue el indicador de que la interacción ya estaba siendo capturada por CSS.
Cómo estilizar el label con el selector de hermano adyacente
Detectar el input no era suficiente, porque seguía oculto. La meta era que el label cambiara de estilo cuando su input correspondiente estuviera seleccionado.
Ahí entra el selector +, conocido como selector de hermano adyacente. Selecciona el elemento que viene inmediatamente después de otro, siempre que compartan el mismo padre.
¿Qué hace el selector + en CSS? Selecciona el siguiente elemento hermano que comparte padre con el primero. Por ejemplo, input:checked + label aplica estilos al label que está justo después del input marcado.
En el HTML original, el orden era label y luego input. Para que el selector funcionara, hubo que invertir el orden: primero el input, después el label. Así el label se convierte en el hermano siguiente del input.
Con el orden corregido, el CSS quedó así:
css
input {
display: none;
}
input:checked + label {
background: #color;
}
Al hacer clic en cualquier tarjeta, el label asociado cambia de fondo y el jugador ve de inmediato cuál Mokepón eligió [6:30].
Cómo elegir un color que combine con el diseño
El primer color de prueba fue rojo, pero resultaba demasiado fuerte frente al resto de la paleta. Para ajustarlo, se usó Color Hunt, una herramienta de paletas de colores recomendada en clases anteriores.
Ahí se buscó un azul claro que armonizara con el azul oscuro ya presente en la interfaz. El cambio fue tan simple como reemplazar el valor del background en el CSS y recargar para validar el resultado [8:00].
- Identifica la paleta base de tu proyecto.
- Busca tonos complementarios o análogos en Color Hunt.
- Prueba el color en contexto antes de fijarlo.
Qué propiedades de CSS aprendiste en este módulo
Este cierre recoge las bases que necesitas para construir sitios web sólidos con CSS:
- width y height para definir el tamaño de los elementos.
- margin para abrir espacios entre elementos.
- padding para crear espaciado interno dentro de un elemento.
- Flexbox y CSS Grid para organizar layouts complejos.
- Pseudoclases como checked, hover y active para responder a la interacción del usuario.
- Selector de hermano adyacente
+ para estilizar elementos relacionados sin JavaScript.
¿Qué otra interacción te gustaría resolver solo con CSS en tu próximo proyecto? Cuéntame en los comentarios.
