> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sitespy.app/llms.txt
> Use this file to discover all available pages before exploring further.

# CSS & XPath Filters

> Monitor specific page sections using CSS selectors and XPath expressions

Filters let you control exactly which parts of a page Site Spy monitors. Instead of tracking the entire page (and getting notifications for every small change), you can focus on specific sections and ignore the rest.

You do not have to write any of this by hand. Pointing at the page in the [picker](/docs/dashboard/element-picker) produces the Monitor Only selector for you, and that is how watches are normally created. This page is the reference for reading, editing, or writing one yourself.

Filters are available on **all plans**, including Free.

## Filter types

Each watch has three filter fields, accessible from the [Watch Settings](/docs/dashboard/watch-settings) gear icon:

### Monitor Only (include filters)

CSS or XPath selectors that limit monitoring to specific page sections. Only content matching these selectors is tracked — everything else is ignored.

This is the field the [picker](/docs/dashboard/element-picker) fills in. **Pick it on the page instead**, directly below the textarea, opens the stored snapshot of the watch so you can click the element rather than describe it. Use the textarea when you already know the selector, or when you want to tune one the picker produced.

**CSS examples:**

* `#price` — element with id "price"
* `.product-info` — elements with class "product-info"
* `table.rates` — a table with class "rates"
* `h1, h2, h3` — all headings

**XPath examples:**

* `//*[@id="price-table"]` — element with id "price-table"
* `//div[@class="rates"]` — div with class "rates"
* `//table[1]` — the first table on the page

You can add multiple selectors — each one on its own line.

### Exclude Elements (subtractive selectors)

CSS selectors for elements to remove before checking for changes. Useful for filtering out noisy sections while keeping the rest of the page.

**Examples:**

* `.cookie-banner` — remove cookie consent banners
* `#ads` — remove ad sections
* `nav, footer` — remove navigation and footer
* `.sidebar` — remove sidebar content

### Text Patterns (ignore text)

Text strings or regex patterns to exclude from change detection. Any matching text is stripped before comparing snapshots.

**Plain text:** `Last updated` — ignores any line containing this text

**Regex:** `/\d{1,2}:\d{2}\s*(AM|PM)?/i` — ignores timestamps like "3:45 PM"

Regex patterns must be wrapped in `/pattern/` with optional flags (`i` for case-insensitive).

## Finding selectors

The picker is the short way: click the element and Site Spy derives the selector, anchored on an id or a class wherever the page offers one. It opens from **Find What to Watch** on a new watch, from **Pick it on the page instead** on an existing one, and from **Pick an Element on This Page** in the browser extension. See [Choosing What to Watch](/docs/dashboard/element-picker).

To work one out yourself with DevTools:

1. Right-click the element you want to monitor in your browser
2. Click **Inspect** (or **Inspect Element**)
3. In the DevTools Elements panel, look for the element's `id` or `class`
4. Use `#id-name` for IDs or `.class-name` for classes

Prefer an id or a stable class over a positional path. A selector ending in `:nth-child(3)` follows whatever is third right now, so it stops meaning the same thing the moment the page reorders.

## Common examples

| Goal                        | Filter type      | Value                             |
| --------------------------- | ---------------- | --------------------------------- |
| Monitor only the price      | Monitor Only     | `#price` or `.price`              |
| Ignore the sidebar          | Exclude Elements | `.sidebar`                        |
| Ignore timestamps           | Text Patterns    | `/\d{1,2}:\d{2}/`                 |
| Ignore "Last updated" lines | Text Patterns    | `/last\s+(updated\|modified).*/i` |
| Monitor a specific table    | Monitor Only     | `table.rates`                     |
| Ignore cookie banners       | Exclude Elements | `.cookie-banner, #consent`        |

## Automatic noise repair

[Automatic noise repair](/docs/dashboard/noise-repair) is a separate feature. It does not replace the picker and it is not how you narrow a watch: it adds ignore patterns around what you already chose, on a watch that is already alerting too often. A selector you picked or typed yourself is left alone.

## Invalid filters are dropped, not rejected

Site Spy validates every selector and regex before saving. Anything that cannot be compiled — a Tailwind arbitrary-value selector like `w-[calc(100%-1rem)]`, a JavaScript-only regex construct like `\p{Sc}`, malformed XPath — is removed from the watch instead of failing the save.

The save reports success and the bad filter is simply gone. This applies to every route into a watch: the picker, the settings dialog, the API, MCP, imports, and share links. The AI chat reaches the ignore and trigger patterns the same way, though it cannot write the Monitor Only selector at all. If a filter you added does not appear after saving, it did not compile — check the syntax above and try a simpler selector.