Is there a CSS parent selector?

Short Answer:
No, there is no native “parent selector” in CSS that directly selects an element based on its child. However, CSS Selectors Level 4 introduces the :has() pseudo-class, which acts as a “parent-like” selector in modern browsers. Here’s how it works and the alternatives:

1. CSS `:has()` (Modern Browsers)

The :has() pseudo-class allows you to select a parent element that contains a specific child.
Example:

/* Select a <div> parent if it contains a child with class "active" */
div:has(.active) {
  background: lightgreen;
}

Browser Support (as of 2023):

Chrome (v105+), Safari (v15.4+), Firefox (v121+), Edge (v121+).
Check Can I Use for current support.

Use Cases:

Style a parent when it contains a specific child.
Target elements based on descendant conditions.

2. Workarounds Without `:has()`

If :has() isn’t supported, use these alternatives:

JavaScript

// Add a class to parents with a specific child
document.querySelectorAll('.child-selector').forEach(child => {
  child.parentElement.classList.add('parent-has-child');
});

Restructure HTML/CSS

Modify your markup or use sibling combinators (+, ~) for adjacent relationships.

3. Limitations of `:has()`

Performance: Complex :has() selectors can slow down rendering.
No Backward Traversal: Cannot select parents based on previous siblings (e.g., parent:has(~ sibling)).

Practical Example with `:has()`

<ul>
  <li>Item 1</li>
  <li>Item 2 <span class="highlight">(New!)</span></li>
</ul>

/* Style the <li> if it contains a .highlight span */
li:has(.highlight) {
  border: 2px solid gold;
}

Key Takeaways

Method	Pros	Cons
`:has()`	Native, no JS needed	Limited browser support
JavaScript	Universal support	Requires scripting
HTML/CSS Restructure	Reliable	Not always feasible

Use :has() for modern projects and provide fallbacks for older browsers. Check Can I Use for updates!

1. CSS :has() (Modern Browsers)

2. Workarounds Without :has()