What is it?
The CSS Selector Tester shows which parts of your HTML a CSS selector picks. Paste your HTML and a selector, and every matching element is listed, so you can check it before using it in a stylesheet or script.
Who is it for?
Front-end developers, people writing web scrapers and automation (Selenium, Playwright), Blogger theme editors, and students learning selectors.
How to use it
- Paste some HTML.
- Type a selector, e.g.
ul.menu > li:not(.active) a. - Read the matched elements; adjust until it selects exactly what you want.
Quick reference
a b: b anywhere inside a.a > b: b directly inside a..x.y: both classes.[href^="https"]: links starting with https.li:nth-child(2n): every second item.
Errors and how to fix them
- “Type a selector”: the selector box is empty.
- “No elements match this selector”: check class names (case-sensitive), the > child combinator vs a space, and that the HTML really contains those elements.
- Invalid selector: an unclosed bracket or a typo in a pseudo-class.
- Works here but not on the live site: the live page may add elements with JavaScript after loading.
Questions people ask
- Does it support :has()? Yes, in browsers that support it.
- Is my HTML uploaded? No, it’s tested in your browser.
Practical tip
Paste a small part of the real page’s HTML (from Inspect → Copy outerHTML) instead of guessing its structure; selectors then behave exactly as on the live page.
Open the tool: CSS Selector Tester
Still stuck?
Contact support. Tell us which tool or page you were using, what you tapped, what you saw, and your phone or computer and browser (for example: Android phone, Chrome). We reply by email.
Questions, or an error not listed here?
Tell us in the comments: what you were doing, the exact message you saw, and your device and browser. We read every comment and add new fixes to this article.