:has() - The Parent Selector

Syntax

:has(selector)

Examples

.form-group:has(input:invalid) {
  border-left: 3px solid red;
  background: #fef2f2;
}

.card:has(img) {
  grid-template-columns: 100px 1fr; /* image + text layout */
}

.card:not(:has(img)) {
  grid-template-columns: 1fr; /* text-only layout */
}

.field:has(+ .error-message) input {
  border-color: red; /* highlights an input if an error message follows it */
}

Parameters and values

• :has(selector) (pseudo-class): Matches if the given selector matches anything inside the element

Best practices

• Use :has() to replace many patterns that previously required JavaScript, like styling a form field based on its own validity state
• Combine :has() with :not() to style elements that specifically lack certain children
• Keep :has() selectors reasonably simple - deeply nested conditions can become hard to reason about, even though they are valid
• Use :has() for genuinely conditional styling based on content structure, not as a general replacement for simple class-based styling

At a glance

Purpose

Presentation and layout

File extension

.css

Runs in

Web browsers

Usually used with

HTML and JavaScript

Specifications & further reading

• CSS specifications (modules)

Related CSS documentation