Safely Using the :has() Selector Today
Explore styling using :has() with :is() or :where() for fallbacks, and query support with @supports.
We'll cover the following
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 1400+ tech skills courses.