Cuando construyes un juego interactivo con HTML y CSS, cada pequeño detalle cuenta para que la experiencia del usuario sea clara y satisfactoria. Uno de esos detalles es indicar visualmente cuál opción fue seleccionada antes de avanzar a la siguiente pantalla. Para lograrlo, CSS ofrece herramientas poderosas como las pseudoclases y el selector de hermano adyacente, que permiten cambiar estilos en tiempo real sin necesidad de JavaScript.
¿Qué problema resuelve la retroalimentación visual en la selección?
En el juego de mokepones, la pantalla inicial presenta varias tarjetas para escoger un personaje. Sin embargo, no existía ningún indicador visual que le mostrara al jugador cuál mokepon había seleccionado [01:00]. Solo al pasar a la siguiente pantalla se revelaba la elección. Esto genera confusión y una mala experiencia de usuario.
El objetivo es que, al hacer clic en una tarjeta, esta cambie de apariencia inmediatamente. Para conseguirlo, se trabaja con la estructura HTML existente: cada tarjeta está compuesta por un label y un input de tipo radio. Los inputs están ocultos con display: none, así que el reto es estilizar el label cuando su input asociado está seleccionado.
¿Cómo funcionan las pseudoclases en CSS?
Las pseudoclases son palabras clave que se añaden a un selector para aplicar estilos según el estado o la interacción del usuario con un elemento [02:10]. Se escriben con dos puntos (:) después del selector.
:hover se activa cuando el usuario pasa el mouse por encima de un elemento.:active se aplica en el momento exacto en que se hace clic.:checked detecta cuando un input de tipo radio o checkbox ha sido seleccionado.
Por ejemplo, para detectar que un input fue seleccionado se escribe:
css
input:checked {
width: 100px;
}
Al recargar el navegador y hacer clic en uno de los inputs, este cambia su ancho inmediatamente [03:18]. Eso confirma que la pseudoclase :checked está funcionando correctamente.
¿Qué es el selector de hermano adyacente y cómo se usa?
El problema es que no queremos estilizar el input (que permanece oculto), sino el label que muestra la tarjeta. Aquí entra el selector de hermano adyacente, representado con el signo + [03:45].
En HTML, cuando dos elementos comparten el mismo padre y están uno al lado del otro, se consideran elementos hermanos. Si el input y el label son hermanos contiguos, se puede escribir:
css
input:checked + label {
background: red;
}
Esto significa: cuando el input esté chequeado, aplica estilos al label que viene justo después. Al probarlo en el navegador, al seleccionar un input, el label siguiente cambia de fondo [04:20].
¿Cómo reorganizar el HTML para que el selector funcione correctamente?
Para que cada tarjeta reaccione al clic sobre sí misma y no sobre la tarjeta siguiente, es necesario reordenar los elementos en el HTML [04:50]. El input debe colocarse justo antes de su label correspondiente, de modo que el selector + apunte al hermano correcto.
Una vez reorganizado:
- El input mantiene
display: none para seguir oculto.
- Al hacer clic en la tarjeta, el label asociado cambia de estilo.
- El usuario identifica de inmediato su selección.
css
input {
display: none;
}
input:checked + label {
background: #a8d8ea;
}
El color rojo inicial no resultaba agradable visualmente, así que se reemplazó por un azul claro obtenido de Color Hunt [05:55], una herramienta para elegir paletas de colores armónicas.
¿Qué propiedades de CSS se consolidaron en este módulo?
A lo largo de todo el módulo se trabajaron las bases fundamentales de CSS para construir interfaces web funcionales:
width y height para definir el tamaño de los elementos.margin para generar espacio exterior entre elementos.padding para crear espaciado interno.- Flexbox y CSS Grid como sistemas de diseño para distribuir elementos en la página.
- Pseudoclases como
:hover, :active y :checked para responder a interacciones del usuario.
- Selector de hermano adyacente (
+) para aplicar estilos a un elemento basándose en el estado de su hermano previo.
Cada una de estas herramientas se complementa para lograr interfaces claras, interactivas y con buena experiencia de usuario. Si quieres seguir profundizando, experimenta combinando pseudoclases con otros selectores y comparte tus resultados en los comentarios.
