CSSHard

What does :has() make possible that CSS previously couldn't do?

By FrontendPro Editorial Team Updated 8/14/2026

#css#selectors

Answer

:has() is the parent selector - style an element based on what it contains.

css

/* Cards that contain an image lay out differently */
.card:has(img) { grid-template-columns: 120px 1fr; }

/* Label turns red when the input inside is invalid */
.field:has(input:user-invalid) { color: #dc2626; }

/* Lock scrolling while a dialog is open */
body:has(dialog[open]) { overflow: hidden; }

Specificity comes from its strongest argument. :has() can't be nested inside another :has(), and doesn't accept pseudo-elements.

CSS