Element: closest() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

The closest() method of the Element interface traverses the element and its parents (heading toward the document root) until it finds a node that matches the specified CSS selector.

Syntax

js
closest(selectors)

Parameters

selectors

A string of valid CSS selectors to match the Element and its ancestors against.

Return value

The closest ancestor Element or itself, which matches the selectors. If there are no such element, null.

Exceptions

SyntaxError DOMException

Thrown if the selectors is not a valid CSS selector.

Examples

HTML

html
<article>
  <div id="div-01">
    Here is div-01
    <div id="div-02">
      Here is div-02
      <div id="div-03">Here is div-03</div>
    </div>
  </div>
</article>

JavaScript

js
const el = document.getElementById("div-03");

// the closest ancestor with the id of "div-02"
console.log(el.closest("#div-02")); // <div id="div-02">

// the closest ancestor which is a div in a div
console.log(el.closest("div div")); // <div id="div-03">

// the closest ancestor which is a div and has a parent article
console.log(el.closest("article > div")); // <div id="div-01">

// the closest ancestor which is not a div
console.log(el.closest(":not(div)")); // <article>

Specifications

Specification
DOM
# ref-for-dom-element-closest①

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
closest
Chrome – Full support
Chrome 41 (Release date: 2015-03-03)
footnote Full support
Edge – Full support
Edge 15 (Release date: 2017-04-05)
footnote Full support
Firefox – Full support
Firefox 35 (Release date: 2015-01-13)
footnote Full support
Opera – Full support
Opera 28 (Release date: 2015-03-10)
footnote Full support
Safari – Full support
Safari 6 (Release date: 2012-07-25)
footnote Full support
Chrome Android – Full support
Chrome Android 41 (Release date: 2015-03-11)
footnote Full support
Firefox for Android – Full support
Firefox for Android 35 (Release date: 2015-01-13)
footnote Full support
Opera Android – Full support
Opera Android 28 (Release date: 2015-03-10)
footnote Full support
Safari on iOS – Full support
Safari on iOS 9 (Release date: 2015-09-16)
footnote Full support
Samsung Internet – Full support
Samsung Internet 4 (Release date: 2016-03-11)
footnote Full support
WebView Android – Full support
WebView Android 41 (Release date: 2015-03-11)
footnote Full support
WebView on iOS – Full support
WebView on iOS 9 (Release date: 2015-09-16)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Compatibility notes

  • In Edge 15-18 document.createElement(tagName).closest(tagName) will return null if the element is not first connected (directly or indirectly) to the context object, for example the Document object in the case of the normal DOM.

See also