CSS :has() Selector

What You’ll Learn

The :has() pseudo-class lets you style an element based on what it contains or what is inside it. It is CSS’s long-awaited “parent selector.”

Introduction

The :has() selector in CSS is a relational pseudo-class that allows you to style elements based on their descendants or related elements inside them.

Before :has(), CSS could only travel downward in the DOM tree — for example, .card img styles an image inside a card. With :has(), you can flip that logic and style the card when it contains an image: .card:has(img).

Definition and Usage

Append :has() to a selector and pass a valid CSS selector inside the parentheses. The outer element matches only if at least one element inside it (or related to it) matches the inner selector.

📝 Syntax

The syntax for the :has() pseudo-class is:

element:has(selector) {
  /* CSS properties */
}

Parameters

• element — The element you want to style (the parent or container).
• selector — A valid CSS selector matching one or more elements inside (or related to) the outer element.

Basic Example

/* Style a box only when it contains a link */
.box:has(a) {
  border: 2px solid #2563eb;
  background-color: #eff6ff;
}

/* Default box style */
.box {
  border: 2px solid #cbd5e1;
  background-color: #f1f5f9;
}

Syntax Rules

• The selector inside :has() can be an element, class, ID, attribute, or pseudo-class.
• Use :not(:has(...)) to match elements that do not contain a match.
• Styles apply to the element with :has(), not the inner matched element.
• Specificity includes both the outer selector and the inner selector.
• Keep selectors simple for readability and performance on large pages.

Related Selectors

• :is() — matches if any selector in a list matches the element itself
• :where() — like :is() but with zero specificity
• :not() — excludes matches; combine with :has() for inverse logic
• element > element — child combinator (descendant-only, no parent styling)
• :checked, :invalid — common inner selectors for forms and lists

When to Use :has()

:has() shines when the style of a container depends on its contents:

• Parent highlighting — Style a card, row, or section when it contains a link, image, or badge.
• Dynamic layouts — Change grid or flex layout based on what children are present.
• Form validation — Highlight a form when any field is invalid: form:has(:invalid).
• Interactive lists — Style a list item when its checkbox is checked: li:has(input:checked).
• Conditional UI — Show visual cues on containers without adding extra classes in HTML or JavaScript.

Examples Gallery

Practice :has() with parent highlighting, form validation, checked list items, and image cards.

<style>
  .box:has(a) {
    border: 2px solid #2563eb;
    background-color: #eff6ff;
  }
  .box {
    border: 2px solid #cbd5e1;
    background: #f1f5f9;
    padding: 1rem;
    border-radius: 0.5rem;
  }
</style>

<div class="box">
  <p>This box has text only.</p>
</div>
<div class="box">
  <p>Contains an <a href="#">anchor</a>.</p>
</div>

form:has(:invalid) {
  border: 2px solid #dc2626;
  background: #fef2f2;
  padding: 1rem;
  border-radius: 0.5rem;
}

input:invalid {
  border-color: #dc2626;
}

li:has(input:checked) {
  text-decoration: line-through;
  color: #94a3b8;
}

li {
  list-style: none;
  padding: 0.35rem 0;
}

.card:has(img) {
  border: 2px solid #2563eb;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.card {
  border: 1px solid #e2e8f0;
  border-radius: 0.65rem;
  padding: 1rem;
  max-width: 14rem;
}

💬 Usage Tips

• Targeting parents — Style a container when it holds a button, input, image, or any specific child element.
• Dynamic layouts — Adjust spacing, borders, or grid columns based on content without JavaScript class toggling.
• Form validation — Combine with :invalid, :valid, or :required for visual feedback on entire forms or field groups.
• Inverse matching — Use :not(:has(img)) to style elements that lack a specific child.
• Readability first — Long, nested :has() chains are hard to maintain; prefer simple, scoped selectors.

⚠️ Common Pitfalls

• Expecting content changes — :has() is for styling only; it cannot add, remove, or move DOM nodes (use JavaScript for that).
• Overly complex selectors — Deeply nested :has() on large pages can impact performance; profile if you notice slowdowns.
• Styling the wrong element — Remember styles apply to the element with :has(), not the inner matched child.
• Legacy browser gaps — Very old browsers lack support; provide fallbacks or progressive enhancement when needed.
• Specificity surprises — The inner selector adds specificity; test cascade order when combining with other rules.

♿ Accessibility

• Do not rely on color alone — When highlighting invalid forms, also use text labels or icons that screen readers can access in HTML.
• Preserve focus indicators — Parent highlighting should not hide or remove child focus rings.
• Checked state — Ensure checkboxes have associated <label> elements; :has() styling is supplementary.
• Progressive enhancement — Pages should remain usable even if :has() styles are not applied.
• Contrast — Warning borders and backgrounds must meet WCAG contrast requirements.

💡 Best Practices