May 2023
Intermediate to advanced
92 pages
1h 26m
English
Heralded as “the parent selector”, the :has() pseudo-class has far greater range than just styling an element’s ancestor. With its availability in Safari 15.4+ and Chromium 105+, and behind a flag in Firefox, now is a great time to become familiar with :has() and its use cases.
As a pseudo-class, the basic functionality of :has() is to style the element it’s attached to—otherwise known as the “target” element. This is similar to other pseudo-classes like :hover or :active, where a:hover is intended to style the <a> element in an active state.
However, :has() is also similar to :is(), :where(), and :not(), in that it accepts a a list of relative selectors within its parentheses. ...
Read now
Unlock full access