Use the free CSS Selector Tester below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.
Why Testing a Selector Before You Use It Matters
A CSS selector is a short pattern that picks out elements on a page, for example all paragraphs inside a card, or every second row of a list. Selectors are used in stylesheets, in browser automation, in scraping scripts, and in testing tools, and a small mistake in one can silently pick the wrong elements or nothing at all. This tester lets you check a selector against HTML you paste in, before it ever touches a real website or a real stylesheet.
The key safety rule of this tool is that your HTML never becomes a live page. The selector runs only against the document you pasted, inside a sandboxed preview frame where scripts are blocked. That means a pasted snippet cannot run code, pop up dialogs, or reach other pages. You can safely test selectors against HTML copied from a page you are working on, a template you are building, or an example from a tutorial, and see exactly which elements match.
How to Use It
Start with the sample HTML already in the box, or replace it with your own snippet. Then type your selector and press the test button. The tool counts the matches and lists the first twenty, with their tag names and a short piece of their text, so you can tell at a glance whether the selector found what you meant.
- Paste or type the HTML you want to test into the HTML box.
- Type a CSS selector, for example .card p, ul li.hot, or div > p:first-child.
- Press Test selector and read the match count at the top of the result.
- Check the listed matches: tag, text, and order should match what you expected.
- If nothing matches, simplify the selector piece by piece until matches appear, then rebuild it.
- Try the Try button to see a working example, then edit the selector to your own case.
A Worked Example
Suppose your HTML has a card with two paragraphs and a list with three items, one marked hot. The selector .card p matches both paragraphs inside the card and nothing else, which is exactly what you want if you plan to style card text. The selector li.hot matches only the second list item, while li alone matches all three. Testing both side by side shows the difference between a class selector, which narrows the result, and a plain tag selector, which takes everything of that kind.
Tips That Save Time
- Test the simplest version first, then add one piece at a time: tag, then class, then a child or descendant combinator.
- Use a dot for classes and a hash for ids. Mixing them up is the most common reason a selector returns zero matches.
- Check the order of matches too. Scripts and styles often depend on the first match, not just on the count.
- If a selector works in the tester but not on your site, check for typos in class names and for elements added later by JavaScript.
- Keep a note of selectors you verified here, so you can reuse them in your stylesheet or script with confidence.
Common Mistakes to Avoid
The most common mistake is writing a selector from memory and trusting it without a test, then wondering why a style or script affects the wrong part of the page. Another is forgetting that a space means descendant, while a greater-than sign means direct child only, so div p and div > p can return very different sets. A third is testing against the wrong HTML: if you paste an old version of your markup, a correct selector can look broken. Always paste the current markup, and re-test after you change it.
Questions People Ask
Does this tool run scripts in my pasted HTML? No. The preview frame is sandboxed with scripts blocked, and the selector runs only against your pasted document, so pasted code cannot execute.
Why does my selector match nothing? Usually a class or id is misspelled, a dot or hash is missing, or the structure is different from what you assumed. Simplify the selector until it matches, then rebuild it step by step.
A selector tested here is a selector you can trust. Paste your HTML, test your pattern, and only then put it into your stylesheet, script, or test suite.