CSS selectors are the key to precise content tracking. Learn how to identify and use CSS selectors to target exactly the content you want to monitor.
What are CSS Selectors?
CSS selectors are patterns used to select elements on a webpage. In Trackr, they tell our system exactly which part of the page to monitor for changes.
Basic Selector Types
- ID Selector:
#product-price- Targets element with specific ID - Class Selector:
.price-display- Targets elements with specific class - Element Selector:
h1- Targets specific HTML elements - Attribute Selector:
[data-price]- Targets elements with specific attributes
How to Find CSS Selectors
Method 1: Browser Extension (Easiest)
Our browser extension automatically generates CSS selectors for you!
- Install the Trackr browser extension
- Navigate to the page you want to track
- Click the extension icon and select the element
- The CSS selector is automatically generated
Method 2: Browser Developer Tools
For manual CSS selector creation:
- Right-click the element you want to track
- Select "Inspect" or "Inspect Element"
- In the developer tools, right-click the highlighted HTML element
- Choose "Copy" → "Copy selector"
- Paste the selector into Trackr
Browser-Generated Selectors Warning
Browser-generated selectors can be overly complex and fragile. They may break if the page structure changes slightly. Consider simplifying them after copying.
Common Selector Patterns
Tracking a Price
.product-price span.amount
Targets the price amount inside a product price container
Tracking a Title/Heading
h1.article-title
Targets the main heading with a specific class
Tracking Stock Status
#availability-status
Targets element with ID showing stock availability
Tracking Specific Data Attribute
[data-product-id="12345"] .price
Targets price within element with specific data attribute
CSS Selector Best Practices
Good Selectors:
#price- Simple ID.product-title- Descriptive class[data-testid="price"]- Stable data attribute.main-content h1- Clear hierarchy
Avoid These:
div > div > span:nth-child(3)- Too specific.css-1x2y3z4- Auto-generated classesbody > div:nth-child(5)- Position-dependent
Selector Guidelines
- Prefer IDs and semantic class names over complex paths
- Avoid position-based selectors like
:nth-child() - Use data attributes when available - they're stable
- Keep selectors as short as possible while remaining unique
- Test your selector on the page before creating the task
Testing Your Selectors
Before creating a tracking task, verify your CSS selector works correctly:
Browser Console Test
- Open the page you want to track
- Press F12 to open Developer Tools
- Go to the Console tab
- Type:
document.querySelector('YOUR_SELECTOR_HERE') - Press Enter - if it returns an element, your selector works!
Pro Tip: Multiple Elements
If your selector matches multiple elements, use document.querySelectorAll('YOUR_SELECTOR') to see all matches. You may need to make your selector more specific.
Troubleshooting Common Issues
Selector Not Finding Content
The content might be loaded dynamically with JavaScript.
Solution: Enable browser rendering in your task settings
Selector Matches Multiple Elements
Your selector is too broad and selects more than one element.
Solution: Add more specific classes or use a parent element to narrow down
Selector Stops Working After Site Update
The website changed its HTML structure or classes.
Solution: Update your selector using the browser extension or developer tools
Selector Cheat Sheet
Basic Selectors
#id |
Element with ID |
.class |
Element with class |
element |
HTML element type |
[attr] |
Has attribute |
Combinators
A B |
B inside A (descendant) |
A > B |
B direct child of A |
A + B |
B after A (sibling) |
A.B |
A with class B |
Next Steps
Now that you understand CSS selectors, learn about content types to ensure your tracked content is parsed correctly.
Learn About Content Types
