How to use the CSS Selector Tester
- 1. Paste your HTMLUse a snippet of your page or the sample.
- 2. Type a selectorAnything CSS supports, like .card > h3, li:nth-child(odd) or a[href^="https"].
- 3. See the matchesMatching elements are outlined in the preview and listed below.
Selectors worth practising
.card h3: any h3 inside .card (descendant)..card > h3: only direct children.h2 + p: the paragraph right after an h2;h2 ~ p: every later sibling paragraph.li:nth-child(odd),li:first-child,li:last-of-type: position-based picks.a[href^="https"],[data-role="admin"]: attribute selectors.:not(.active)and:has(img): exclude or select by what is inside.
The tester uses your browser's own selector engine, so a selector that works here works in your CSS and in document.querySelectorAll.
Worked example
The sample is a list of three courses, one marked active. The selector ul.courses li:not(.active) matches 2 elements, the two courses that are not active, and they are outlined in orange in the preview. Its specificity is (0, 2, 2): one class (.courses), the :not() part, which counts as its argument .active (another class), and two elements (ul and li). Use our specificity calculator to compare several selectors.
The preview runs with scripts switched off, so pasted code cannot do anything harmful. Pseudo-elements such as ::before cannot be matched as elements, so the tool will tell you there are no matches for them. Test the selector here before you put it in your stylesheet or a querySelector call, and you will spend far less time wondering why a rule does nothing.
Frequently asked questions
How is this different from the XPath tester?
This one is for CSS selectors and highlights matches visually. The XPath tester supports XPath expressions, used heavily in Selenium.
Does it support :has()?
Yes, in any browser that supports :has(), which includes all current major browsers.
Is my HTML uploaded?
No. It is parsed in your browser.
Is it free?
Yes, free. Your first test asks for your name and WhatsApp number once, and after that it and all other Uncodemy tools are open.