Use cases for :has:

• .card:has(button:focus-visible)
• .xy-pad:has(.handle:active), .xy-pad:has(.handle:focus-visible)
• We can use :has as a sort of global event listener: html:has([data-disable-document-scroll="true"])
• JS-free darkmode: body:has(#dark-mode-toggle:checked)
• p:has(+ figure): with :has, we can style one element based on another element in a totally different container! See the cool code playground that highlights

:has can be powerful to replace JS with HTML semantics.