W3cubDocs

/Web APIs

Element: matches() method

The matches() method of the Element interface tests whether the element would be selected by the specified CSS selector.

Syntax

js

matches(selectors)

Parameters

selectors

A string containing valid CSS selectors to test the Element against.

Return value

true if the Element matches the selectors. Otherwise, false.

Exceptions

SyntaxError DOMException

Thrown if selectors cannot be parsed as a CSS selector list.

Examples

HTML

html

<ul id="birds">
  <li>Orange-winged parrot</li>
  <li class="endangered">Philippine eagle</li>
  <li>Great white pelican</li>
</ul>

JavaScript

js

const birds = document.querySelectorAll("li");

for (const bird of birds) {
  if (bird.matches(".endangered")) {
    console.log(`The ${bird.textContent} is endangered!`);
  }
}

This will log "The Philippine eagle is endangered!" to the console, since the element has indeed a class attribute with value endangered.

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
matches 334 151212–79 4434
3.6["Before Firefox 4, invalid selector strings caused false to be returned instead of throwing an exception.", "See bug 1119718 for removal."]
9 211511.5–15 85 ≤374.4 3318 4434
4See bug 1119718 for removal.
211411.5–14 84.2 2.01.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/matches