: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.