Free CSS Selector Tester

Paste HTML and test CSS selectors in real-time. See matched elements highlighted, view specificity scores, inspect element details, and use the built-in cheat sheet. Supports testing multiple selectors at once. 100% client-side.

0 matches
Paste HTML and enter a selector to begin
HTML Input
Specificity Calculator ▼
Enter a selector to see specificity
-,-,-
Selector Cheat Sheet ▼
Basic
*
Universal selector
element
Type selector
.class
Class selector
#id
ID selector
Combinators
A B
Descendant
A > B
Direct child
A + B
Adjacent sibling
A ~ B
General sibling
Attribute
[attr]
Has attribute
[attr="val"]
Exact match
[attr~="val"]
Contains word
[attr^="val"]
Starts with
[attr$="val"]
Ends with
[attr*="val"]
Contains substring
Pseudo-classes
:first-child
First child element
:last-child
Last child element
:nth-child(n)
Nth child
:nth-of-type(n)
Nth of type
:not(sel)
Negation
:empty
No children
:only-child
Sole child
:has(sel)
Has matching descendant
Pseudo-elements
::first-line
First line of text
::first-letter
First letter
::before
Before content
::after
After content

Need something more powerful?

Let us build it for you. Custom APIs, dashboards, automations — whatever you need.

Start a Project →
Open source

IT-Tools

269 free tools. No signup. Open source. Built by Christian Bucher.

IT-Tools Browse 269 Free Tools →

Related Tools

# CSS Specificity Calculator Calculate and compare CSS selector specificity rankings 📏 CSS Unit Converter Convert between px, rem, em, vw, vh, % and pt 🎨 CSS Variables System Generate CSS custom properties for colors, typography, spacing 👁 CSS Variable Visualizer Visualize and edit CSS custom properties with live preview 📦 HTML/CSS/JS Minifier Minify HTML, CSS, and JavaScript with size reduction stats 🔧 JavaScript Minifier & Beautifier Minify JS to shrink file size or beautify minified code with clean indentation. Runs entirely in your browser.