CSS Selector Tester
See What Your Selector Matches

What A CSS Selector Tester Does

A selector is a question about your markup. This css selector tester answers it in front of you, so the guesswork goes away. Paste the markup, type the selector, and read the elements it reached.

Four questions cover most of the work. First, which elements does this selector match? Then, what does the selector actually say in plain words? After that, how strong is it against a rival rule? Finally, what is the shortest selector for one element you can point at?

This is not a stylesheet tool. Because shrinking and tidying CSS belongs to another job, the CSS minifier handles that side. Here the subject is matching, and nothing else.

Nothing to install. Therefore you paste a fragment, read the answer, and close the tab when it suits you.

How A CSS Selector Tester Works

The work splits into three passes. First, the page reads your markup into a tree of tags and attributes. Then that tree is rebuilt as real elements that never join the page. Finally, your selector runs against the rebuilt copy, and the matches come back in document order.

The matcher is the browser's own. Because the Selectors Level 4 rules are long and full of corner cases, a hand-written engine would disagree with real pages sooner or later. So this page asks the engine that already ships in your browser, since the same engine will judge your site.

The rebuilt copy stays detached. As a result it has no styles, no scripts and no layout. That is deliberate, since the question here is which elements a selector reaches, not what they would look like.

Test A Selector Against Your Own Markup

A selector that works in a tutorial can still miss your markup. Therefore the honest test is your own fragment, pasted as it is. Copy a block out of the page source and drop it in.

Each match arrives with its context. So you get the count first, then every matched element with its opening tag, and the path that leads to it from the top of the fragment.

The path is the useful part. Because two matches often look identical, the path shows which one is which. After that, a selector that catches one element too many is easy to narrow.

An empty result is still an answer. Yet it is the answer people miss, so the page says plainly that nothing matched rather than showing a blank box.

What Gets Dropped Before Matching

This tool treats your paste as text, never as a page. So the rebuild leaves out script and style tags, iframes and embeds entirely.

Event attributes go the same way. Because an onclick or an onerror only matters to a live page, the rebuild drops them with the tags that carried them. A javascript: address in an href loses its tag too.

The rest survives untouched. Therefore your classes, ids, data attributes and nesting are all still there for the selector to match on.

jQuery Selector Tester Without jQuery

Half the selectors people paste are not CSS at all. Instead they come from jQuery, which added its own shapes such as :first, :eq() and :contains(). A plain css selector tester would simply refuse them.

This one answers them anyway. Because those shapes resolve to a position or a text test over a match list, the page applies them itself after the CSS part has run. So a jquery selector tester lives here without a line of jQuery on the page.

The page shows the translation instead of hiding it. Therefore you see which part was standard CSS and which part the page handled afterwards. That way a selector you are porting to plain querySelectorAll holds no surprises.

Some shapes have no equivalent. Still, the page names them instead of pretending, which is the only useful thing to do with a selector nothing can match.

Where :first And :eq Differ From CSS

The traps are the ones that look harmless. For example :first picks one element out of the whole match list, while :first-child and :first-of-type ask about an element's position among its siblings.

That difference bites on real markup. Because a list of ten items has ten first-of-type candidates in ten different parents, yet only one of them is the list's first match. So the two forms answer different questions.

CSS Specificity Calculator

Matching is only half of a rule's story. The other half is strength, which the cascade settles by counting the parts of a selector. So this css specificity calculator reports that count as the three numbers browsers actually use.

The three numbers are easy to read. First come id selectors, then classes, attributes and pseudo-classes, and finally element names and pseudo-elements. After that the comparison is a simple left to right one.

Inline styles and important sit outside the triple. However, the page says where they land, because a rule that loses on paper can still win in the browser for one of those two reasons.

The specificity rules reward short selectors. Therefore a selector that scores lower is often the better one to ship, since it stays easy to override later.

Which Of Two Selectors Wins

Paste two selectors and the answer is immediate. Because both triples appear side by side, the winner is visible without counting anything by hand.

The page calls a tie a tie. Then the rule that appears later in the stylesheet wins, and the page says so rather than leaving you to remember it.

Read A Selector In Plain English

A long selector hides its own meaning. So the page reads it back as a sentence, part by part, in the order the browser applies them.

The reading needs no markup at all. Because the explanation comes from the selector's own structure, you can check a selector from a code review before you have the page it belongs to.

Combinators are where people slip. Therefore a space, a greater-than sign, a plus and a tilde are each named in words, since descendant, child, next sibling and later sibling are four different questions.

The same habit helps with markup you did not write. After a quick read of the selector, a glance at the HTML minifier output or the page source usually explains the rest.

A Selector For One Element

Sometimes the element comes first and you need the selector for it. So you pick a node in the parsed tree, and the page offers the shortest selector that reaches only that element.

Short is the goal, not clever. Because an id alone is often enough, the page tries that first, then a class, and only then a path through the parents.

What This Page Will Not Do

It will not run your JavaScript. Since the rebuilt copy is inert on purpose, a selector that depends on a script having run will not match here.

It will not match state. However, that is a property of any detached markup: hover, focus, visited and target describe a live page, so they stay empty.

It will not style anything. A selector tester answers which elements, and the look of those elements is a separate question for the browser you ship to.