CSS Selector Tester

Test CSS selectors against HTML snippets

Paste your HTML, write a CSS selector, and immediately see what it matches. No browser console, no live page needed — just the markup you're working with. Useful when you're writing a scraper and want to confirm that .product-title > a actually grabs what you think it does, before running it against a thousand pages.

HTML / XML

No input provided

How to use

  1. 1Paste HTML — Copy the HTML fragment from DevTools (Inspect → Copy outerHTML) or the page source.
  2. 2Write a selector — Enter a CSS selector in the Selector field. For example: .product-card h2 a or div[data-id].
  3. 3Get results — In auto mode, matches are highlighted as you type. Disable auto mode to run manually with Run.
  4. 4Refine your selector — Too many or too few matches? Adjust the selector and re-run. Changes apply instantly.

Examples

Product titles on a listing page
.product-card .title a
Select product headings — get text and href in a single query without extra steps.
Pagination links
nav.pagination a[href]
Skip disabled elements — select only anchors with an href attribute inside the nav.
Nth list item
ul.results li:nth-child(3)
If the third item is "featured" — extract it separately for special handling.
All elements with a data attribute
div[data-product-id]
Find all divs with the attribute regardless of value — works on SPAs without stable class names.
Element without a certain class
.item:not(.disabled)
Filter out inactive elements — get only active items from the list.

When to use for web scraping

CSS selectors are the foundation of most Python and Node.js scrapers: BeautifulSoup, Cheerio, Scrapy, and Playwright use them natively. The problem is that selectors that look correct in DevTools often break on real HTML — because DevTools shows the live DOM after JavaScript execution, not the raw source. This tool works directly with an HTML string — exactly the way your parser will. Test your selector against the raw HTML before running a crawler on thousands of pages and discovering the class name differed by one character. Especially useful: paste HTML from Request Tester to get the raw page response, write and test your selector here, then copy to your code.

FAQ

What's the difference between CSS selectors and XPath?›
CSS selectors are shorter and more readable for most tasks. XPath is more powerful for tree traversal upward (selecting a parent by a descendant's text) — CSS can't do that. For scraping, CSS is usually enough and easier to debug.
Why does my selector work in DevTools but not in the scraper?›
DevTools shows the DOM after JavaScript execution. The scraper gets the raw HTML before JS. Elements added by JavaScript aren't in the source. Test against the HTML that actually comes in the response — use Request Tester to get it.
Are :hover and :focus pseudo-classes supported?›
Dynamic pseudo-classes (:hover, :focus, :checked) don't apply to static HTML — they only work in a live browser. Structural pseudo-classes (:nth-child, :first-of-type, :not()) work fully.
How do I select an element with multiple classes?›
Chain classes without spaces: .class-one.class-two — the element must have both. A space (.class-one .class-two) means "descendant" — .class-two inside .class-one.
Do these selectors work in Scrapy and BeautifulSoup?›
Yes. Scrapy response.css() and BeautifulSoup select() use the CSS Selectors Level 4 spec. Selectors that work here work in both libraries — with minor exceptions for the newest pseudo-classes.

Related tools

XPath TesterUse for tree traversal and XMLRequest TesterGet HTML to test selectorsRegex TesterExtract values from textEncoder / DecoderDecode HTML entities in data