CSS :has() relational selector gains Safari support

The CSS :has() pseudo-class, officially termed the relational pseudo-class, has gained significant browser support, including recent implementation in the Safari Technology Preview. This feature allows developers to style an element based on its descendants or subsequent content, effectively acting as a parent selector.

Previously requested by developers for many years, :has() enables complex relational styling. For example, it can target a section containing specific image elements or style a form differently if it contains invalid inputs. Beyond simple parent selection, it can also match antecedent elements based on following content, such as selecting a header that is immediately followed by a specific sibling type.

While :has() is now supported in Chrome, Edge, and Safari, it remains behind a flag in Firefox. Developers can use feature queries with the @supports selector() function to test for compatibility and ensure graceful degradation for users on unsupported browsers.