CSS Selector Tester Free Online Tool 2026

Last updated March 22, 2026

Common Selector Mistakes

• .parent .child vs .parent > .child — descendant vs direct child
• :nth-child(2) vs :nth-of-type(2) — counts all siblings vs same-type siblings
• a.active vs a .active — element with class vs descendant with class
• div + p vs div ~ p — immediately adjacent vs any following sibling
• [attr="value"] vs [attr*="value"] — exact match vs contains

The CSS Selector Tester on TechConverter.me provides instant visual feedback for any CSS selector against any HTML markup. Enter your selector and HTML, see which elements are highlighted, and verify your selectors are correct before using them in production.

/* Test HTML */
<div class="container">
  <h1 id="title">Page Title</h1>
  <p class="intro">Introduction paragraph.</p>
  <p>Regular paragraph.</p>
  <a href="https://example.com">External link</a>
  <a href="/about">Internal link</a>
</div>

/* Selector tests */
p              → matches: both <p> elements
.intro         → matches: first <p> only
#title         → matches: <h1> only
.container p   → matches: both <p> elements (descendant)
.container > p → matches: both <p> elements (direct children)
a[href^="https"] → matches: external link only (href starts with https)
a[href^="/"]   → matches: internal link only (href starts with /)

/* Test HTML */
<ul class="list">
  <li>Item 1</li>
  <li class="active">Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

/* Selector tests */
li:first-child      → matches: Item 1
li:last-child       → matches: Item 5
li:nth-child(2)     → matches: Item 2
li:nth-child(odd)   → matches: Items 1, 3, 5
li:nth-child(even)  → matches: Items 2, 4
li:nth-child(2n+1)  → matches: Items 1, 3, 5 (same as odd)
li:nth-child(3n)    → matches: Items 3, 6, 9... (every 3rd)
li:nth-child(-n+3)  → matches: Items 1, 2, 3 (first 3)
li:not(.active)     → matches: Items 1, 3, 4, 5 (all except active)
li:not(:first-child):not(:last-child) → matches: Items 2, 3, 4 (middle items)

/* Test HTML */
<div class="parent">
  <p>Direct child paragraph</p>
  <div class="child">
    <p>Nested paragraph</p>
  </div>
  <span>Adjacent sibling</span>
  <span>General sibling</span>
</div>

/* Selector tests */
.parent p          → matches: BOTH paragraphs (descendant combinator)
.parent > p        → matches: ONLY direct child paragraph (child combinator)
.child + span      → matches: "Adjacent sibling" only (adjacent sibling +)
.child ~ span      → matches: BOTH spans (general sibling ~)
div + span         → matches: "Adjacent sibling" (first span after div)