Maquetación Web Dinámica / Pseudo-clases y pseudo-elementos: el arsenal secreto

Reto: checklist interactivo sin una línea de JS

Reto45 min60 XP

El cierre del módulo es una demostración de poder: una lista de tareas interactiva — ítems que se tachan, contador de progreso, estado de "completado" con celebración — construida SOLO con HTML y CSS. Hace tres años esto requería JavaScript; hoy es :checked + :has() bien combinados.

Reto

Checklist interactivo: cero JavaScript

Media40 min60 XP(×2 sin mirar la solución)

Qué debes construir

Una lista de preparación de viaje (o el tema que quieras) con esta conducta:

<section class="checklist">
<h3>Antes del viaje</h3>
<label class="item"><input type="checkbox"><span>Pasaporte vigente</span></label>
<label class="item"><input type="checkbox"><span>Reservar hotel</span></label>
<label class="item"><input type="checkbox"><span>Empacar maleta</span></label>
<label class="item"><input type="checkbox"><span>Cargar el celular</span></label>
<p class="celebracion">¡Todo listo! Buen viaje ✈</p>
</section>

body { font-family: system-ui; padding: 20px; background: #f8fafc; }
.checklist { background: white; border: 1px solid #e2e8f0; border-radius: 14px; padding: 20px; max-width: 320px; }
.checklist h3 { margin: 0 0 12px; color: #1e293b; font-size: 16px; }
.item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: #334155; }
.item:hover { background: #f1f5f9; }
.item:has(:checked) { background: #f5f3ff; }
.item:has(:checked) span { text-decoration: line-through; color: #94a3b8; }
.item input { accent-color: #6d28d9; width: 16px; height: 16px; }
.item:has(:focus-visible) { outline: 2px solid #a78bfa; outline-offset: 1px; }
.celebracion { display: none; margin: 12px 0 0; font-weight: 700; color: #15803d; font-size: 14px; text-align: center; }
.checklist:not(:has(input:not(:checked))) .celebracion { display: block; }
.checklist:not(:has(:checked)) h3::after { content: " — 0 de 4"; color: #94a3b8; font-weight: 400; font-size: 13px; }

Requisitos:

4+ ítems, cada uno un label que envuelve su checkbox y su texto (el clic en TODO el ítem marca/desmarca — módulo 2, la pareja inseparable).
Ítem marcado: texto tachado y atenuado, fondo sutil del acento — vía :has(:checked) en el label.
El checkbox con accent-color de la casa (¡una línea — investígala, es nueva para ti!).
Foco visible: el ÍTEM entero se resalta cuando su checkbox recibe foco de teclado (:has(:focus-visible)).
El gran final: cuando TODOS están marcados, aparece un mensaje de celebración — la sección entera reacciona al estado de todos sus hijos.
Bonus: contador "N de 4" junto al título usando contadores CSS... o la honestidad de descubrir su límite (lee la Solución al terminar).

Reglas

Cero JavaScript. Ni una línea. Todo es HTML semántico + CSS.
Debe funcionar con teclado: Tab entre ítems, Espacio para marcar, foco siempre visible.
Nada de ocultar los checkboxes nativos con opacity 0 y redibujarlos — esta vez estilízalos de verdad (accent-color) y que la accesibilidad quede intacta gratis.

40:00

Cuando estés listo, arranca el reloj.

El razonamiento: el reto entero es UNA idea aplicada tres veces — el estado vive en los checkboxes (:checked) y los PADRES reaccionan con :has() — a tres alturas distintas:

Altura ítem: .item:has(:checked) — el label reacciona a SU checkbox (tachado, atenuado, fondo).
Altura sección: .checklist:not(:has(input:not(:checked))) — la sección reacciona a TODOS. La doble negación es el truco elegante: "no existe ningún no-marcado" = "todos marcados", sin importar cuántos ítems tenga la lista (agregas el quinto y el selector ni se entera).
Altura teclado: .item:has(:focus-visible) — el foco del hijo se proyecta en el padre.

checklist.css

Sobre el bonus del contador "2 de 4" — la lección de honestidad técnica del módulo: los contadores CSS (counter-increment con .item:has(:checked)) SÍ cuentan... pero counter() solo puede PINTARSE en un ::before/::after de un elemento POSTERIOR en el árbol — no "arriba" junto al título. Se puede mostrar al final de la lista, no en el encabezado (para eso sí hace falta JS o reordenar visualmente con los trucos de order que ya conoces, con sus costos). En la vista previa lo resolvimos solo para el estado "0 de 4" con :not(:has(:checked)) — casos enumerados a mano, que no escalan. Saber DÓNDE termina el CSS puro es tan valioso como exprimirlo: el módulo 14 (JS para maquetadores) retoma este checklist exactamente aquí.

Qué sigue

Módulo 9 cerrado: seleccionas por estado, posición, contenido y parentesco, decoras y dibujas con fantasmas — el arsenal secreto completo. El módulo 10 enciende el MOVIMIENTO: transformaciones y transiciones, la puerta de entrada a la animación profesional.