✦ Técnica J — CSS :has()
El padre reacciona
a sus hijos
Con :has(input:checked), el elemento padre puede reaccionar al estado de cualquier descendiente. Más flexible que el combinador ~ del checkbox hack clásico.
🧲
vs Checkbox Hack clásico
El hack clásico usa el selector hermano
~. Con :has(), el checkbox puede estar en cualquier lugar dentro del padre.
🎯
Selector "padre"
:has() fue llamado durante años el "selector de padre" — algo que CSS nunca tuvo. Finalmente llegó en 2023.
✨
Más legible
.nav:has(.toggle:checked) .links es más claro que #toggle:checked ~ .nav .links. La intención es obvia.
🌐
Soporte
Chrome 105+ · Safari 15.4+ · Firefox 121+. Soporte global ~93%. Se puede usar hoy con fallback.
/* El checkbox puede estar en cualquier parte del nav */
<input type="checkbox" id="has-check" class="has-toggle">
<label for="has-check">burger</label>
<ul class="nav-mobile">...</ul>
/* CSS — :has() como "selector de padre" */
.has-toggle { display: none; }
/* Cuando el nav CONTIENE un input checked → abrir menú */
.nav-root:has(.has-toggle:checked) .nav-mobile {
max-height: 500px;
}
/* Animar hamburger → X */
.nav-root:has(.has-toggle:checked) .burger-label span:nth-child(1) {
transform: translateY(7.5px) rotate(45deg);
}