CSS Selector Tester - Free Online Tool | IconVault
Test CSS selectors live on a sample DOM with match highlighting and a specificity calculator. Free, no signup, runs in your browser.
CSS Selector Tester
Live selector matching with specificity scoring
5 of 5 free tests left.
Try these
A: IDs, B: classes/attributes/pseudo-classes, C: elements/pseudo-elements. Approximation: selectors inside :not() are counted per the outer list.
Sample document (matches get a teal outline)
Sample heading
A lead paragraph inside the hero section.
A second paragraph for sibling tests.
- Item one
- Item two (featured)
- Item three (out of stock)
- Item four
About this tool
IconVault's CSS Selector Tester lets you type any CSS selector and instantly see what it matches. Matches light up with a teal outline on a realistic sample document, you get an exact match count plus a list of the matched elements, and a built-in specificity calculator scores your selector as you type. It is free and runs fully in your browser.
Debugging selectors by refreshing a page and squinting at DevTools is slow. This tester gives you a safe sandbox to experiment with combinators, pseudo-classes like :nth-child(), and attribute selectors, while the specificity readout (IDs vs classes vs elements) teaches you why one rule beats another. Invalid selectors are caught and explained instead of failing silently.
Frequently asked questions
Popular searches
More tools
Font Pairing
Curated heading and body font pairs with live preview
Font Preview
Preview 200+ Google Fonts with your own text
Glassmorphism Generator
Design frosted glass cards and copy the CSS
Gradient Text
Gradient headlines with live preview and CSS
Coming soon
CLI
Coming soon
Figma plugin
Coming soon
VS Code extension
Coming soon
Chrome extension
Coming soon
AI icon generator
Coming soon
Team workspaces
Coming soon