The :has() relational selector

Baseline 2023 Reference ↗

:has() selects an element by looking at a relative condition. “Parent selector” is the famous use case, but it can express much more than ancestry.

form:has(:invalid) {
  border-color: crimson;
}

html:has(dialog[open]) {
  overflow: hidden;
}

Use the narrowest useful condition. The browser implementations are optimized, but a readable selector is still easier to maintain than a deeply nested one.