Selecting an Element by a Child it Contains

The CSS specifications include a feature called :has() that would allow you to select an element that contains another element matching a CSS selector, but so far no browsers have shown interest in supporting it.

(like :has(), :focus-within)

Parts Required

JS Tests

Testing for a child element via querySelector():

this.querySelector(test)

Plugins Capable

Syntax Examples

EQCSS

@element section {
  eval('querySelector("h2") && "$this"') {
    background: darkblue;
  }
}

Selectory

[test="this == document.querySelector(`#target`).parentNode"] {
  background: lime;
}

XPathy

[xpath="//div[h2]"] {
  background: purple;
}

Demos