Selecting the Parent of an Element

A parent selector for CSS is an often-requested feature from developers — but due to the optimizations browsers make when rendering HTML, so it’s not currently possible to include functionality like this.

JavaScript and XPath are both able to locate the parent node of another node, JavaScript with parentNode, and using XPath with /parent::* or /...

Parts Required

To find the parent element of another element using JavaScript you’ll need to use either element.parentNode, element.closest(), or use document.evaluate() to evaluate an XPath selector that selects the parent of another element.

JS Tests

Using the parentNode of the selected element:

element.parentNode

Plugins Capable

Syntax Examples

EQCSS

@element input and (min-characters: 5) {
  $parent {
    background: pink;
  }
}

Selectory

[xpath="//input/.."] {
  border: 1px solid purple;
}

Demos

Further Reading