How do CSS selectors work in visual monitoring?

Restrict visual monitoring to a specific region using a CSS selector so Lemwatch only diffs the part of the page that matters, like pricing or hero.

Quick answer

Add a CSS selector (e.g., #pricing, main .hero) to each monitored page and Lemwatch will crop the screenshot to that element before running the visual diff.

When to use selectors

• Pricing tables you want to track word-for-word
• Hero copy that must never regress
• Legal footers
• Any critical widget wrapped in dynamic chrome

Where to find it in Lemwatch

Site → Visual Monitoring → Monitored Pages → CSS Selector.

FAQ

Which selectors are supported?

Any valid CSS selector: id, class, attribute, descendant, :nth-child.

What if the selector matches nothing?

We fall back to a full-page screenshot and warn in the UI.

Related

• Ignore zones
• Diff threshold