With an image
Two columns.
Tools
:has() Playground
CSS could always style a child by its parent. :has() does the reverse: style a
parent, or an earlier sibling, by what comes after it. Pick a pattern, then click and type in the preview.
Widely availablesince Jun 2026
That does not look like an email address.
Without one
Same class, one column. The template never had to know.
- First task
- Second task
Nothing to do. Enjoy it.
This one acts on the whole page, so it is described and not run here: with the rule in place, opening any <dialog> stops the page behind it from scrolling, and closing it restores scrolling, with no script.
CSS
Every preview here is running exactly this rule.
It is a relational selector, not just a parent selector
The argument is a relative selector, so it can start with a combinator. :has(> img) means a
direct child, :has(+ input) means the next sibling, :has(~ .error) means any later
sibling. That second form is how a label can finally react to the input that follows it.
Two limits worth knowing
You cannot nest :has() inside another :has(), and pseudo-elements are not allowed
inside it. It also takes the specificity of its most specific argument, so :has(#id) weighs as
much as an id. Check any selector in the specificity calculator.
Safe to use
The badge above is read from the browser dataset when this page is built. Where :has() is
missing, the rule is skipped and the element keeps its default styling, so write the default to be usable on
its own. Who ships it, and a live demo.