How to Monitor a Specific Part of a Web Page

Most false alerts come from parts of the page you don't care about. Here's how to point a monitor at exactly one element using a CSS selector, even if you've never written one before.

Start watching free → Explore the live demo

Free plan · 10 URLs · hourly checks · 2 AI summaries/mo · no credit card

Updated

Step by step

  1. Open the page in Chrome, Edge, Firefox, or Safari

    Scroll to the part of the page you want to watch — a price, a list of events, a table, a paragraph.

  2. Right-click it and choose Inspect

    Your browser's developer tools open with the HTML for that element highlighted.

  3. Look for an id or class

    In the highlighted line, an id="…" becomes #… and a class="…" becomes .… — so id="price" is #price and class="event-list" is .event-list. If the highlighted element has neither, click its parent line and look there.

  4. Test the selector

    In the developer tools Console, type document.querySelectorAll("#price") and press Enter. If it returns the element you expect (and not dozens of others), the selector is good.

  5. Add it to your monitor

    In Site Monitor, tick "Notify me when page content changes" and paste the selector into the CSS selector box. Separate several selectors with commas, for example #price, .stock.

You choose which alerts each URL sends — downtime, content changes, slow responses — and we email you when they happen.

What you'll need

  • A desktop browser with developer tools
  • The page you want to watch
  • Two minutes to find and test a selector

Choosing a selector that won't break

Prefer ids and descriptive class names (#pricing, .tour-dates, .policy-body) over long chains of generic ones (div > div > span:nth-child(3)). Descriptive names usually survive small redesigns; positional chains break as soon as the layout shifts.

Avoid class names that look auto-generated, such as .css-1x2y3z or .sc-a1b2c3. Those often change every time the site is rebuilt. If that's all you can find, choose a nearby parent element with a stable name, or a semantic tag such as main or article.

Watching more than one element

Enter several selectors separated by commas and Site Monitor compares all of them together. This is handy for shop pages (price and stock status) or event pages (dates and ticket links).

What happens without a selector

If you leave the selector blank, Site Monitor uses smart extraction of the page title and main body text. That works well for articles, policies, and documentation. Use a selector when the page also has frequently changing parts — ads, counters, timestamps, or recommendations — that you want to ignore.

When a selector is set, AI summaries can be generated for any change to that element, not just large ones, because everything inside the selector is something you've said you care about.

A quick CSS selector cheat sheet

#name matches the element with id="name". Ids should be unique on a page, so they're the most precise choice when one exists.

.name matches every element with class="name" (an element can have several classes separated by spaces; any one of them works). If several elements share the class, all of them are watched together.

tag matches elements by type: main, article, table, h1. main and article are useful for watching "the content" of a page while ignoring navigation and footers.

A B (with a space) matches B inside A — for example #schedule li watches every list item inside the element with id schedule. A, B (with a comma) watches both A and B.

[attribute] and [attribute="value"] match by attribute, for example [data-testid="price"]. Test attributes like data-testid are often more stable than class names.

Examples by type of page

Shop product page: the price and the stock label, such as .price, .availability. Event or venue page: the list of upcoming dates, often a ul or table inside a section with an id like #events or #tour. Policy or legal page: the document body, usually main or article.

Job board or careers page: the list of openings, often a ul or a div with a class like .jobs-list. Documentation or changelog: the main content column, so edits to the sidebar navigation don't trigger alerts. Competitor pricing page: the pricing table or the individual plan cards.

In every case, the goal is the same: the smallest part of the page that still contains everything you'd want to be told about.

Frequently asked questions

Will rotating ads, timestamps, or counters cause false alerts?

Not if you scope the watch. Add a CSS selector (for example #pricing or .event-list) and Site Monitor fingerprints only that element — everything else on the page is ignored. Whitespace-only changes never trigger an alert.

Does it work on pages that load content with JavaScript?

Yes. Site Monitor can render the page in a headless browser before fingerprinting it, so content injected by JavaScript is included in the comparison.

What if the selector stops matching after a redesign?

Update it on the site's page in your dashboard. From the next check, the page is compared using the new selector.

Is Site Monitor free?

Yes. The Free plan covers 10 URLs checked every hour, with 2 AI change summaries a month — no credit card required. Upgrade only if you need faster checks, more URLs, or more AI summaries.

Start watching your first page

Start watching free → Explore the live demo

Free plan · 10 URLs · hourly checks · 2 AI summaries/mo · no credit card

Related