How to Target Parent Class from Child Class in CSS?

Directly targeting a parent element from a child element using only CSS has historically been one of CSS's most requested, yet unavailable, features. However, with the introduction of the powerful :has() pseudo-class, this capability is now a reality, allowing you to style a parent element based on its descendants.

The Challenge of the "Parent Selector"

For many years, web developers relied on various workarounds to apply styles to a parent element based on the presence or state of one of its children. Traditional CSS selectors move downwards through the DOM tree (e.g., parent child), but there was no native way to select upwards. This meant tasks like styling a <div> if it contained an image, or changing a list item's background if it had an active link, often required JavaScript or adding redundant classes to parent elements.

Introducing the :has() Pseudo-Class: The True Parent Selector

The CSS :has() pseudo-class fundamentally changes how we can select and style elements. It acts as a parent selector, allowing you to style a parent element if it contains a specific element as a child or any descendant that matches a given selector. This opens up a world of possibilities for more dynamic and semantic CSS.

How it Works:

The :has() selector takes a relative selector list as an argument. If any element in that list matches a descendant of the element :has() is applied to, then the element is selected.

Syntax:

/* Selects any <div> that contains a <p> element */
div:has(p) {
  /* Styles for the div parent */
}

/* Selects any <ul> that contains an <li> with class 'active' */
ul:has(li.active) {
  /* Styles for the ul parent */
}

Practical Applications and Examples

The :has() pseudo-class enables elegant solutions for many common design challenges:

1. Styling a Parent Based on Child Presence

Imagine you have a card component, and you want its border to be different if it contains an image.

HTML:

<div class="card">
  <h2>Card Title</h2>
  <p>Some content.</p>
</div>

<div class="card">
  <img src="image.jpg" alt="Description">
  <h2>Card with Image</h2>
  <p>More content.</p>
</div>

CSS with :has():

.card {
  border: 1px solid #ccc;
  padding: 15px;
  margin-bottom: 20px;
}

/* Styles the .card parent if it contains an <img> */
.card:has(img) {
  border-color: #007bff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

2. Dynamic Layouts Based on Child State

You can use :has() to adjust layouts or styles when a child element is in a specific state, such as checked, focused, or invalid.

HTML:

<div class="form-group">
  <label for="username">Username:</label>
  <input type="text" id="username" required>
  <p class="error-message">This field is required.</p>
</div>

CSS with :has():

.form-group {
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid transparent;
}

/* Highlights the form-group if its input is invalid */
.form-group:has(input:invalid) {
  background-color: #ffebeb;
  border-color: #cc0000;
}

/* Shows the error message only when the input is invalid */
.form-group:has(input:invalid) .error-message {
  display: block;
  color: #cc0000;
  font-size: 0.9em;
  margin-top: 5px;
}

.error-message {
  display: none; /* Hidden by default */
}

3. Styling Navigation Items Based on Active Links

A common scenario is highlighting a parent <li> if its <a> child has an active class.

HTML:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products" class="active">Products</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

CSS with :has():

nav ul li {
  list-style: none;
  display: inline-block;
  margin-right: 20px;
}

nav ul li a {
  text-decoration: none;
  color: #333;
  padding: 5px 10px;
}

/* Styles the li parent if its a child has the 'active' class */
nav ul li:has(a.active) {
  background-color: #e0f2f7;
  border-radius: 5px;
}

nav ul li:has(a.active) a {
  color: #007bff;
  font-weight: bold;
}

Browser Support for :has()

The :has() pseudo-class has excellent modern browser support, marking a significant step forward for CSS capabilities.

Browser	Support	Version Introduced
Chrome	Fully Supported	105
Firefox	Fully Supported	105
Safari	Fully Supported	15.4
Edge	Fully Supported	105
Opera	Fully Supported	91

For the most up-to-date information on browser support, you can always refer to resources like MDN Web Docs.

Best Practices

• Specificity: Remember that :has() adds to the specificity of your selector.
• Performance: While powerful, complex :has() selectors might have a minor performance impact in very large or frequently reflowed DOMs. Use them judiciously.
• Readability: Despite its power, keep your :has() selectors as clear and concise as possible for maintainability.

Conclusion

The CSS :has() pseudo-class finally delivers the long-awaited parent selector. It empowers developers to write more semantic, efficient, and dynamic CSS without relying on JavaScript for styling parent elements based on their children's characteristics or states. This feature is a game-changer for responsive design, component-based styling, and overall CSS architecture.