Advanced Features

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.

Updated 2026-07-10

1 min read

visual-monitoring

selectors

diff

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.

Ignore zones

Diff threshold

Was this article helpful?

What structured data does the Answers Hub use?

How do I stop visual monitoring flagging ads or rotating banners?

Draw ignore-zone rectangles on the screenshot so Lemwatch masks noisy regions (ads, timestamps, carousels) before comparing pixels.

What is the visual monitoring diff threshold?

The diff threshold sets how much pixel change must accumulate before Lemwatch alerts — default 2% is right for most product pages.

Maintenance Windows

Suppress alerts during planned maintenance to prevent false alarms.

Carbon Footprint Tracking

Measure your website's environmental impact and CO₂ emissions.

Back to Help Center