CssHow-ToBeginner · 4 min read

How to Use :has() Selector in CSS for Parent Selection

The CSS :has() selector lets you select an element if it contains a specific child or descendant. It works like a parent selector, for example, div:has(p) selects any div that has a p inside it. This powerful selector helps style parents based on their children.

📐

Syntax

The :has() selector takes a selector list inside parentheses and matches elements that contain at least one element matching that selector.

element:has(selector) — selects element if it has a child or descendant matching selector.
You can use any valid selector inside :has(), including classes, IDs, or combinators.

css

/* Basic syntax */
selector:has(selector_inside) {
  /* styles */
}

/* Example */
div:has(p) {
  border: 2px solid blue;
}

💻

Example

This example shows how to highlight a div only if it contains a p element inside it. The div with a paragraph gets a blue border, while others stay normal.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CSS :has() Example</title>
<style>
div {
  padding: 1rem;
  margin: 1rem 0;
  background-color: #f0f0f0;
}
div:has(p) {
  border: 3px solid blue;
  background-color: #e0f7ff;
}
</style>
</head>
<body>

<div>
  <p>This div has a paragraph inside.</p>
</div>

<div>
  <span>This div does not have a paragraph.</span>
</div>

<div>
  <p>Another div with a paragraph.</p>
  <span>And a span too.</span>
</div>

</body>
</html>

Output

Three boxes stacked vertically. The first and third boxes have a bright blue border and light blue background because they contain <p> elements. The second box has no border and a gray background because it lacks a <p>.

⚠️

Common Pitfalls

Browser support: The :has() selector is supported in modern browsers but may not work in older versions or some browsers like Internet Explorer.
Performance: Using :has() with complex selectors on many elements can slow down page rendering.
Wrong usage: Trying to select a child from a parent using :has() will not work; it only selects the parent based on children.

css

/* Wrong: trying to select child with :has() (does not work) */
/* This does nothing */
p:has(div) {
  color: red;
}

/* Correct: select parent div that has p inside */
div:has(p) {
  border: 2px solid green;
}

📊

Quick Reference

Selector	Description	Example
:has(selector)	Selects elements containing selector	div:has(p) selects divs with p inside
:has(> selector)	Selects elements with direct child matching selector	ul:has(> li.active) selects ul with active li child
:has(:not(selector))	Selects elements containing something not matching selector	form:has(:not(input)) selects forms with non-input children

✅

Key Takeaways

Use :has() to style a parent element based on its children or descendants.

:has() accepts any valid selector inside the parentheses.

Check browser support before using :has() in production.

Avoid complex selectors inside :has() for better performance.

:has() cannot select children; it only selects parents based on children.