# Element: matches() method



The **`matches()`** method of the [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) interface tests whether the element would be selected by the specified [CSS selector](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors).

## Syntax

```js-nolint
matches(selectors)
```

### Parameters

- `selectors`
  - : A string containing valid [CSS selectors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors) to test the [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) against.

### Return value

`true` if the [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) matches the `selectors`. Otherwise, `false`.

### Exceptions

- `SyntaxError` [DOMException](https://developer.mozilla.org/en-US/docs/Web/API/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

## See also

- [CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Selectors) module
- Other [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) methods that take selectors: [Element.querySelector()](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector), [Element.querySelectorAll()](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll), and [element.closest()](https://developer.mozilla.org/en-US/docs/Web/API/element/closest).