CSS Selectors

Extract specific content from web pages using CSS selectors

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

p

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

HTML Structure

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

Monitor Multiple Elements

Separate Lines

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.

Combined Selector

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:

Include Filter

.article-body

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

Testing CSS Selectors

Using Browser DevTools

1. Right-click on the element you want to monitor
2. Select “Inspect” or “Inspect Element”
3. In the DevTools console, test your selector:
   document.querySelectorAll('.your-selector')
   
4. Verify it returns the elements you expect

Using the Visual Selector

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

1. Navigate to the Visual Selector tab in your watch settings
2. Click on elements directly on the page
3. The CSS selector is automatically generated
4. 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 First

Always 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

1. Run a check on your watch
2. View the Preview tab to see extracted content
3. Adjust your selector if needed
4. 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.

Related Topics

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