CSS and XPath selector tester: paste HTML, see every match

This tool runs a CSS selector or XPath expression against HTML you paste. It uses the browser’s own parser and query engine, so the result matches what a browser sees, not what a Python library might see. Nothing is uploaded.

How to use it

1. Paste the HTML you want to query.
2. Enter a CSS selector such as article.card h2 or an XPath expression such as //article[contains(@class,"card")]//h2.
3. Switch the syntax selector between CSS and XPath.
4. Read the match count and the first eight matches.

CSS vs XPath

• CSS is shorter for tag, class, id, attribute, and descendant matches. It is the right default.
• XPath is better when the position or text of a nearby element determines the target, such as “the cell after the header that says Price”.

The CSS and XPath lesson covers the patterns and the pitfalls.

Limits

• The tool uses the browser’s HTML parser. Python’s html.parser, lxml, and selectolax may repair malformed HTML differently.
• It shows the first eight matches; a page with 1,000 matches is truncated in the preview.
• It does not execute JavaScript. If the content is client-rendered, paste the rendered DOM or use a browser automation tool.
• XPath support depends on the browser; document.evaluate implements the standard subset.

A good selector checklist

1. Anchor on the smallest stable container.
2. Prefer semantic attributes over generated classes.
3. Test on more than one page of the same type.
4. Fail loudly if the match count is zero.
5. Store a fixture and the expected output in a test.

Sources

• MDN — CSS selectors
• MDN — XPath