Closest Ancestor Combinator

A custom selector that allows authors to target the closest ancestor element of another element that matches a selector.

<target> /--closest/ <ancestor> { <list of declarations> }

• <target> is a CSS selector showing where the start the sibling comparison
• <ancestor> is a CSS selector to to match against all ancestor elements. Only the ancestor closest to the target tag will be selected.

Usage

If you have HTML like this:

<label>
  <div>Enter a valid email</div>
  <input type=email required>
</label>

And you wanted to style the background of the <label> based on the <input> element's validity status, you could write a selector like this

:invalid /--closest/ label {
  background: pink;
}
:valid /--closest/ label {
  background: lightgreen;
}

More Info

• This feature automatically uses jsincss-closest-selector plugin for support in the browser.