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

css, css-selectors

Solution

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

Problem

The structure of my HTML is like so ``` <div> <div> <h1>Something</h1> </div> <div> <h1 class='Handle'>Something</h1> </div> </div> ``` In the event that the `div > div` does not have a child with the class "Handle" I want the the `div > div` to have the style `cursor:move;`. How would I go about doing this in pure CSS, is it even possible?

Original source