Saltar al contenido

El selector :has() me cambió la forma de escribir CSS

antonella F.

Nivel 2 ·

Ahora que :has() funciona en todos los navegadores principales, estoy borrando un montón de JavaScript que solo servía para agregar clases al padre. Ejemplo: .card:has(img) { padding: 0; } form:has(input:invalid) button { opacity: .5; } ¿Qué usos le encontraron?
1109 vistas 6 respuestas 1 0

Respuestas 6

  1. Josefina

    Nivel 3 ·

    1 0

    El 'selector padre' que pedimos durante 20 años. Mi favorito: label:has(input:checked) para estilizar opciones seleccionadas sin JS.

  2. Gabriel B.

    Nivel 3 ·

    0 0

    Para layouts: .grid:has(> :nth-child(5)) para cambiar columnas según cuántos hijos haya. Muy útil.

  3. Benjamín R.

    Nivel 3 ·

    1 0

    Ojo con el rendimiento en selectores muy amplios tipo body:has(...) sobre páginas enormes. En general anda bien, pero no hay que abusar.

  4. Francisco R.

    Nivel 3 ·

    0 0

    También sirve para 'hermanos anteriores', que antes era imposible: h2:has(+ p) selecciona los h2 que tienen un párrafo justo después.

  5. Cecilia R.

    Nivel 2 ·

    0 0

    Y para un modo oscuro manual: html:has(#modo-oscuro:checked) { ... }. Un checkbox y listo.

  6. antonella F.

    Nivel 2 ·

    0 0

    Lo del h2:has(+ p) no se me había ocurrido. Qué potencia.