One of the most useful selectors recently introduced in CSS is the :has() selector. This selector gives us the ability to “cascade backwards”, writing selectors backwards, allowing us to use it as a parent selector without the need to manipulate the DOM with JavaScript.
Although not yet fully supported in all browsers, there are a lot of really awesome use case ideas for this selector. Let’s see a practical example of how to use the :has() selector simplifying the way we can style the validation of a form without the need to use additional classes or JavaScript.
Let’s imagine a list of tasks with the following HTML structure, where we want to style the parent element of the input according to its checked attribute
