← All Tools
CSS Selector Tester
Write CSS selectors and see matched elements highlighted in your HTML. 100% client-side.
🎯 Selector
Enter a selector to test
div > p
. class
# id
a[href]
:first-child
:nth-child
p + p
:not()
📝 HTML Input
<div id="main" class="container"> <h1>Welcome</h1> <p class="intro">First paragraph</p> <p>Second paragraph</p> <nav> <ul> <li><a href="/">Home</a></li> <li class="active"><a href="/about">About</a></li> <li><a href="/contact">Contact</a></li> </ul> </nav> <section class="content"> <article> <h2>Article Title</h2> <p>Article text with <strong>bold</strong> and <em>italic</em>.</p> <a href="https://example.com" target="_blank">Link</a> </article> <aside class="sidebar"> <h3>Related</h3> <ul> <li>Item A</li> <li class="active">Item B</li> <li>Item C</li> </ul> </aside> </section> <footer> <p>© 2026</p> </footer> </div>
✨ Result
📖 Selector Cheat Sheet
✓ Copied!