Revision 1131431 of Element.closest()

<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>

<p>The <code><strong>Element.closest()</strong></code> method returns the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter. If there isn't such an ancestor, it returns <code>null</code>.</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

<pre class="syntaxbox">
var <em>elt =</em><em> element</em>.closest(<em>selectors</em>); 
</pre>

<h3 id="Parameters">Parameters</h3>

<ul>
 <li><em>selectors</em> is a {{domxref("DOMString")}} containing a selector list like <code>"p:hover, .toto + q"</code></li>
 <li><em>element</em> is the {{domxref("Element")}} at the top of the tree of elements to be dealt with.</li>
</ul>

<h3 id="Result_value">Result value</h3>

<ul>
 <li><em>elt</em> is the {{domxref("Element")}} which is the closest ancestor of the selected elements. It may be null.</li>
</ul>

<h3 id="Exceptions">Exceptions</h3>

<ul>
 <li>{{exception("SyntaxError")}} is thrown if the <em>selectors</em> is not a valid selector list string.</li>
</ul>

<h2 id="Example" name="Example">Example</h2>

<pre class="brush: html">
&lt;article&gt;
  &lt;div id="div-01"&gt;Here is div-01
    &lt;div id="div-02"&gt;Here is div-02
      &lt;div id="div-03"&gt;Here is div-03&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/article&gt;</pre>

<pre class="brush: js">
var el = document.getElementById('div-03');

var r1 = el.closest("#div-02");  
// returns the element with the id=div-02

var r2 = el.closest("div div");  
// returns the closest ancestor which is a div in div, here is div-03 itself

var r3 = el.closest("article &gt; div");  
// returns the closest ancestor which is a div and has a parent article, here is div-01

var r4 = el.closest(":not(div)");
// returns the closest ancestor which is not a div, here is the outmost article</pre>

<h2 id="Specification" name="Specification">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>41</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop("35.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>28</td>
   <td>9</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("35.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>9.0</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li>The {{domxref("Element")}} interface.</li>
 <li>
  <div class="syntaxbox"><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">The syntax of Selectors</a></div>
 </li>
</ul>