CSS Selector Tester

HTML Input

<nav> <ul id="menu" class="nav"> <li class="item"><a href="#home" class="active">Home</a></li> <li class="item"><a href="#about">About</a></li> <li class="item"><a href="#services">Services</a></li> </ul> </nav> <main> <section class="card primary"><h2>Title</h2><p class="intro">Intro text.</p></section> <section class="card"><h2>Other</h2><p>Paragraph with <a href="#">link</a>.</p></section> </main>

CSS Selector

Matched Elements (0)

Live Preview (matched = highlighted)

How to use

• Enter any valid CSS selector — IDs, classes, attributes, pseudo-classes, combinators.
• Uses the browser's native document.querySelectorAll (vendor-accurate).
• Bad selectors get a clear error message — no silent fails.