The :has() Pseudo-Class

:has() — the Parent Selector

:has() selects a parent element if it contains a specific child. It is CSS's long-awaited parent selector, now supported in all modern browsers.

Example

/* Card with an image gets different padding */
.card:has(img) { padding: 0; }
.card:not(:has(img)) { padding: 1.5rem; }

/* Form with errors shows error styling */
form:has(input:invalid) .submit-btn {
  opacity: 0.5;
  pointer-events: none;
}

/* Figure that has a figcaption */
figure:has(figcaption) { margin-bottom: 2rem; }

CSS

Full Editor

Pro Tip

:has() is a game changer — it enables styling based on child state without JavaScript class toggling.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned