CSS Selectors - Changedetection.io

CSS selectors allow you to target specific HTML elements on a page for monitoring. This is one of the most common and user-friendly methods for content extraction.

How CSS Selectors Work

CSS selectors use the same syntax as CSS stylesheets to identify HTML elements. When you apply a CSS selector as a filter, changedetection.io extracts only the matching elements and monitors them for changes. Key Benefits:

Familiar syntax if you know CSS
Visual selector tool available in browser mode
Multiple selectors can be combined
Works with any HTML content

Basic Selector Syntax

Element Selectors

Selects all <p> (paragraph) elements.

ID Selectors

#price

Selects the element with id="price".

Class Selectors

.product-title

Selects all elements with class="product-title".

Attribute Selectors

[data-price]

Selects elements with a data-price attribute.

[href*="product"]

Selects elements where href contains “product”.

Practical Examples

Monitor Product Prices

<div class="product">
  <h2 class="product-name">Gaming Laptop</h2>
  <span class="price">$1,299.99</span>
  <div class="description">...</div>
</div>

.price

$1,299.99

Monitor Multiple Elements

Separate Lines
Combined Selector

You can monitor multiple elements by entering each selector on a new line:

.product-title
.price
.availability

Each matching element will appear on a separate line in the output.

Or combine selectors with commas:

.product-title, .price, .availability

This achieves the same result as separate lines.

Extract Specific Table Data

table.pricing tr:nth-child(2) td.amount

This selects the amount cell in the second row of a pricing table.

Monitor Article Headlines

article h1, article h2.subtitle

Extracts the main headline and subtitle from article elements.

Combining Multiple Filters

You can use multiple CSS selectors together to create powerful filters:

Example: E-commerce Product Monitoring

.product-name
#product-price
[data-stock-status]
.reviews-summary

This configuration monitors:

Product name (by class)
Product price (by ID)
Stock status (by data attribute)
Review summary (by class)

Each element will be extracted and monitored independently.

Example: News Article Tracking

article.main h1
article.main .byline
article.main .publish-date
article.main .content > p:first-of-type

Monitors the headline, author, date, and first paragraph of news articles.

Advanced Techniques

Pseudo-selectors

li.item:not(.sold-out)

Selects items that are NOT sold out.

.product:first-child

Selects only the first product.

input[type="text"]

Selects all text input elements.

Child and Descendant Selectors

div.container > p

Direct children only (immediate <p> elements).

div.container p

All descendants (any <p> within the container).

Combining Selectors

div#main .content p.highlight

Very specific: paragraphs with class “highlight” inside elements with class “content” inside a div with id “main”.

Removing Unwanted Elements

Use the “Remove elements” field to exclude parts of the selected content:

.article-body

.advertisement
.related-articles
script

This monitors the article body while removing ads, related articles, and scripts.

Testing CSS Selectors

Using Browser DevTools

Right-click on the element you want to monitor
Select “Inspect” or “Inspect Element”

In the DevTools console, test your selector:

document.querySelectorAll('.your-selector')

Verify it returns the elements you expect

Using the Visual Selector

When using browser-based fetching (Playwright/WebDriver):

Navigate to the Visual Selector tab in your watch settings
Click on elements directly on the page
The CSS selector is automatically generated
Preview the extracted content in real-time

Common Patterns

Pattern: Monitor Specific Divs

#content

Use case: Main content area of a page.

Pattern: Track List Items

ul.products > li

Use case: Product listings, search results.

Pattern: Monitor Data Attributes

[data-product-id="12345"]

Use case: Elements with specific data attributes.

Pattern: Extract Meta Information

meta[property="og:price:amount"]

Use case: Open Graph meta tags for structured data.

Common Pitfalls

Pitfall #1: Selector Too Generic

div

This will match ALL divs on the page, which is usually too much content.Better: Be more specific

div.product-info

Pitfall #2: Relying on Position

div:nth-child(3)

Page structure might change, breaking your selector.Better: Use classes or IDs

div.price-container

Pitfall #3: Not Testing FirstAlways test your selector in browser DevTools before adding it to changedetection.io. Make sure it returns exactly what you expect.

When to Use CSS Selectors

Good for:

Monitoring specific sections of HTML pages
Tracking product prices and availability
Following article content changes
Extracting structured HTML content
When you need a visual selector tool

Not ideal for:

JSON APIs (use JSON filtering instead)
Complex XML documents (consider XPath)
PDF files (see PDF monitoring)
When you need advanced conditional logic (use XPath)

CSS vs XPath

Feature	CSS Selectors	XPath
Syntax	Familiar to web developers	More powerful but complex
Visual selector	✅ Available	❌ Not available
Text extraction	Element-based	Can extract text nodes directly
Conditional logic	Limited	Advanced (contains, not, etc.)
Parent selection	❌ Not possible	✅ Can select parents
Best for	HTML content	XML, RSS, complex queries

Debugging Tips

Check What’s Being Extracted

Run a check on your watch
View the Preview tab to see extracted content
Adjust your selector if needed
Run another check to verify

Selector Returns Nothing

Verify the element exists on the page
Check if the page requires JavaScript (switch to browser-based fetching)
Ensure the class/ID names are correct (they may have changed)
Try a less specific selector

Extracting Too Much Content

Make your selector more specific
Add class or ID constraints
Use child selectors (>) instead of descendant selectors
Use the “Remove elements” filter to exclude unwanted parts

Real-World Examples

Example: Monitor Reddit Post Title

shreddit-post h1

Extracts the title from Reddit posts.

Example: Track GitHub Stars

#repo-stars-counter-star

Monitors the star count on a GitHub repository.

Example: Follow Tweet Content

[data-testid="tweetText"]

Extracts tweet text from Twitter/X.

Example: Monitor Job Listings

.job-listing
.job-title
.salary-range

Tracks new job postings with title and salary information.

XPath Selectors - More powerful alternative for complex scenarios
JSON Filtering - Extract data from JSON APIs
Testing and Debugging - Best practices for testing selectors

​How CSS Selectors Work

​Basic Selector Syntax

​Element Selectors

​ID Selectors

​Class Selectors

​Attribute Selectors

​Practical Examples

​Monitor Product Prices

​Monitor Multiple Elements

​Extract Specific Table Data

​Monitor Article Headlines

​Combining Multiple Filters

​Advanced Techniques

​Pseudo-selectors

​Child and Descendant Selectors

​Combining Selectors

​Removing Unwanted Elements

​Testing CSS Selectors

​Using Browser DevTools

​Using the Visual Selector

​Common Patterns

​Pattern: Monitor Specific Divs

​Pattern: Track List Items

​Pattern: Monitor Data Attributes

​Pattern: Extract Meta Information

​Common Pitfalls

​When to Use CSS Selectors

​CSS vs XPath

​Debugging Tips

​Check What’s Being Extracted

​Selector Returns Nothing

​Extracting Too Much Content

​Real-World Examples

​Related Topics