Safely Using the :has() Selector Today

Explore styling using :has() with :is() or :where() for fallbacks, and query support with @supports.

Enhancing CSS with :has() and fallbacks

As in the image grid example, :has() can be a progressive enhancement— meaning that, if the unique arrangement styles don’t apply due to lack of browser support for :has(), the grid will still be functional, just less refined.

Additionally, remember that rules including :has() as part of a selector list may be thrown out entirely by a non-supporting browser. To avoid this but still include the :has() selector, wrap it within :is() or :where(), which are forgiving of selector lists and allow selectors otherwise seen as invalid by the browser:

Get hands-on with 1200+ tech skills courses.