Consejo – Simplificando la selección de elementos HTML con el selector :has()

Uno de los selectores más útiles que se han introducido recientemente en CSS es el selector :has(). Este selector nos brinda la posibilidad de «remontar la cascada», escribiendo selectores al revés, lo que nos permite utilizarlo como un selector de padre sin la necesidad de manipular el DOM con JavaScript.

Aunque aún no tiene soporte completo en todos los navegadores, hay muchas ideas realmente increíbles de casos de uso para este selector. Veamos un ejemplo práctico de cómo utilizar el selector :has() simplificando la forma en que podemos dar estilo a la validación de un formulario sin la necesidad de utilizar clases adicionales o JavaScript.

Imaginemos una lista de tareas con la siguiente estructura HTML, donde queremos dar estilo al elemento padre del input en función de su atributo checked

Fuente: Linkedin