Selecting an element that doesn’t have a child with a certain class

:not(:has())

Note: Limited support for old browsers.

The example below demonstrates the combination of the :not()
and :has()
pseudo-classes to select elements that do not have a specified child.

div:not(:has(p)) {
  background: powderblue;
}
div:not(:has(p)):hover {
  color: blue;
  background: azure;
}
<div>
  <h1>Does Not Have a Paragraph</h1>
</div>
<div>
  <h1>Has a Paragraph</h1>
  <p>Paragraph</p>
</div>

As of March 2024, :has() is supported by most modern browsers. However, Firefox only recently implemented support for :has in release 121 (dated 2023-12-19.) So, use with caution if old browsers are used by clients.
:not() has been supported since 2015 by most browsers.

Alternatively, jQuery supports the :has() selector.

Leave a Comment

tech