> For the complete documentation index, see [llms.txt](https://docs.browserflow.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.browserflow.app/guides/selectors.md).

# Selectors

Selectors allow you to identify elements on the page when extracting data or interacting with the page.

For example, if you want Browserflow to click on a certain button on the page, it needs to know which button to click. The selector `button:contains("Submit")` would tell Browserflow to click on a `<button>` HTML element with the text "Submit".

## Generating selectors

Ways to generate selectors:

1. Recording actions
2. Using the "Select" button
3. Writing your own selector

### Recording actions

When [recording a flow](/guides/building-a-flow.md#recording-actions), Browserflow will automatically generate selectors for the elements you interact with.

### Using the "Select" button

In the Browserflow editor, you'll find a "Select" button next to the selector field in any command that requires a selector:

![](/files/-MUwDdD0iKv-uWd-Sx3N)

Clicking the "Select" button will trigger the element picker on the current page. When you click on an element, Browserflow will automatically generate a selector for that element.

### Writing your own selector

In addition to all [normal CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors), Browserflow supports a few non-standard psuedo-selectors:

* [`:contains`](https://api.jquery.com/contains-selector/) - Allows selecting an element by its text contents (case-sensitive)
  * e.g. A button with the text "Submit": `button:contains("Submit")`
* [`:has`](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) - Allows selecting an element by the elements it contains
  * e.g. Tweets that embed an external link: `[data-testid="tweet"]:has(a[href*="https://t.co/"])`