:has() basically removes the need for us to use JS to attach classes to parent elements as we can essentially look ahead now, e.g. ".some-component:has(.input-select-all:checked) { background: blue }" whereas we would have to use JS to query the input, then query the parent and attach some css class as a styling hook. Container queries will allow us to fine-tune the not-so-predictable gaps between our predictable bre…
The major browsers (Chrome, Edge, Safari, Opera) support it except for Firefox, which has it behind a flag still. ~76% of users are covered.
:has() CSS relational pseudo-class - https://caniuse.com/css-has