---
name: "up.fragment.matches"
area: "API"
kind: "JavaScript function"
parent: "up.fragment module"
url: "https://unpoly.com/api/up.fragment.matches"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.fragment module](https://unpoly.com/api/up.fragment.md)</nav>

# up.fragment.matches(fragment, selector, [options])

Returns whether the given element matches the given CSS selector or other element.

Other than [`Element#matches()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches) this function supports non-standard selectors like [`:main`](https://unpoly.com/api/main.md) or [`:layer`](https://unpoly.com/api/layer.md).

Instead of a selector you may also pass a second element. In that case the function returns whether both elements match the same [derived target](https://unpoly.com/learn/target-derivation.md).

<nav aria-label="Contents">

#### Contents

- [Examples](#examples)
- [Parameters](#parameters)
- [Return value](#return-value)

</nav>

## Examples {#examples}

```js
let element = document.querySelector('div[up-main]')
up.fragment.matches(element, 'div') // result: true
up.fragment.matches(element, 'span') // result: false
up.fragment.matches(element, ':main') // result: true
up.fragment.matches(element, element) // result: true
```

---

## Parameters {#parameters}

### Comparison {#parameters-comparison}

#### fragment {#fragment}

(required)

The element to test.

Type: [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)

#### selector {#selector}

(required)

The selector that the `fragment` should match.

When an [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element) is passed as this `selector` argument, this functions tests whether `fragment` matches a [target derived](https://unpoly.com/learn/target-derivation.md) from `selector`.

Type: string | [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)

### Layer {#parameters-layer}

#### [options.layer] {#options.layer}

(optional)

The layer for which to match.

Pseudo-selectors like [`:main`](https://unpoly.com/api/main.md) may expand to different selectors in different layers.

Defaults to the layer of `fragment`.

Type: string | [up.Layer](https://unpoly.com/api/up.Layer.md)

#### [options.mode] {#options.mode}

(optional)

Required if `{ layer: 'new' }` is passed.

Type: string | [up.Layer](https://unpoly.com/api/up.Layer.md)

---

## Return value {#return-value}

Whether `fragment` matches the given `selector`.

Type: boolean