# Cypress Documentation
# Source: https://raw.githubusercontent.com/cypress-io/cypress-documentation/main/docs/api/commands/closest.mdx
# Path: docs/api/commands/closest.mdx

---
title: 'closest | Cypress Documentation'
description: Get the first DOM element that matches the selector in Cypress (whether it be itself or one of its ancestors).
sidebar_label: closest
slug: /api/commands/closest
---

<ProductHeading product="app" />

# closest

Get the first DOM element that matches the selector (whether it be itself or one
of its ancestors).

:::info

The querying behavior of this command matches exactly how
[`.closest()`](https://api.jquery.com/closest) works in jQuery.

:::

## Syntax

```javascript
.closest(selector)
.closest(selector, options)
```

### Usage

<Icon name="check-circle" color="green" /> **Correct Usage**

```javascript
cy.get('td').closest('.filled') // Yield closest el with class '.filled'
```

<Icon name="exclamation-triangle" color="red" /> **Incorrect Usage**

```javascript
cy.closest('.active') // Errors, cannot be chained off 'cy'
cy.clock().closest() // Errors, 'clock' does not yield DOM elements
```

### Arguments

<Icon name="angle-right" /> **selector _(String selector)_**

A selector used to filter matching DOM elements.

<Icon name="angle-right" /> **options _(Object)_**

Pass in an options object to change the default behavior of `.closest()`.

| Option    | Default                                                           | Description                                                                         |
| --------- | ----------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| `log`     | `true`                                                            | Displays the command in the [Command log](/app/core-concepts/open-mode#Command-Log) |
| `timeout` | [`defaultCommandTimeout`](/app/references/configuration#Timeouts) | Time to wait for `.closest()` to resolve before [timing out](#Timeouts)             |

<HeaderYields />

- `.closest()` yields the new DOM element(s) it found.
- `.closest()` is a query, and it is _safe_ to chain further commands.

## Examples

### Selector

#### Find the closest element of the `.error` with the class 'banner'

```javascript
cy.get('p.error').closest('.banner')
```

## Rules

<HeaderRequirements />

- `.closest()` requires being chained off a command that yields DOM element(s).

<HeaderAssertions />

- `.closest()` will automatically [retry](/app/core-concepts/retry-ability)
  until the element(s)
  [exist in the DOM](/app/core-concepts/introduction-to-cypress#Implicit-Assertions).
- `.closest()` will automatically [retry](/app/core-concepts/retry-ability)
  until all chained assertions have passed.

<HeaderTimeouts />

- `.closest()` can time out waiting for the element(s) to
  [exist in the DOM](/app/core-concepts/introduction-to-cypress#Implicit-Assertions).
- `.closest()` can time out waiting for assertions you've added to pass.

## Command Log

**_Find the closest element of `li.active` with the class 'nav'_**

```javascript
cy.get('li.active').closest('.nav')
```

The commands above will display in the Command Log as:

<DocsImage
  src="/img/api/closest/find-closest-nav-element-in-test.png"
  alt="Command Log closest"
/>

When clicking on the `closest` command within the command log, the console
outputs the following:

<DocsImage
  src="/img/api/closest/closest-console-logs-elements-found.png"
  alt="console.log closest"
/>

## See also

- [`.first()`](/api/commands/first)
- [`.parent()`](/api/commands/parent)
- [`.parents()`](/api/commands/parents)
- [`.parentsUntil()`](/api/commands/parentsuntil)
- [`.prev()`](/api/commands/prev)
- [`.prevAll()`](/api/commands/prevall)
- [`.prevUntil()`](/api/commands/prevuntil)