:has() permite estilizar un padre según sus hijos, un hermano según su hermano, y un formulario según su propio estado de validación. Según caniuse hoy lo soporta el 95,91 por ciento de los navegadores, más que otras piezas de CSS que aprendiste hace años. Aquí van siete recetas que antes necesitaban JavaScript.
1. Resalte la tarjeta que contiene una entrada no válida.
.card:has(input:user-invalid) {
outline: 2px solid var(--tomato);
}2. Diseñe cada fila de casilla de verificación de manera consistente desde la propia casilla de verificación:
li:has(> input:checked) {
text-decoration: line-through;
}3. Un encabezado que deja espacio para la barra lateral, solo cuando la barra lateral está presente:
body:has(.sidebar) .header {
padding-left: 18rem;
}4. Las figuras sin título no tienen sombra. Sus primos lo conservan:
figure:not(:has(figcaption)) img { box-shadow: none; }5. Columnas de cuadrícula que se adaptan a lo que se incluyó en la lista. Muy bueno para contenido CMS:
.grid:has(> :nth-child(3)) { grid-template-columns: repeat(3, 1fr); }6. Abra el estilo de estado sin alternar JS, usando el atributo popover:
body:has(#search[open]) { overflow: hidden; }7. El texto del artículo con al menos un bloque de código se amplía:
article:has(pre) { max-width: 72ch; }Eliminar un script DOM es una refactorización mejor que la mayoría de los refactorizadores.
Firefox lo admite desde la versión 121, por lo que la antigua lista de excusas del navegador finalmente está vacía. Elimine la etiqueta del script y deje que el selector haga el trabajo. Si desea el diseño primo de este truco, lea las consultas de contenedor a continuación.