CSS Selector Tester
Test a CSS selector against sample HTML and see exactly what it matches, with its specificity and a safe, highlighted preview.
About this tool
Check whether a CSS selector matches what you expect before you put it in a stylesheet. Your sample HTML is shown in a preview and the selector is run with the browser's own querySelectorAll(), so modern selectors such as :has(), :is(), :where() and :nth-child(2 of .card) behave exactly as they will on your site (as long as your browser supports them). Each match is listed and highlighted, and the selector's specificity is shown as (IDs, classes, elements), with one value per selector in a comma-separated list.
The preview is sandboxed: scripts and event handlers such as onclick or onerror in the sample never run, and it can't load anything from the internet, so it's safe to paste markup from anywhere. Any <style> you include in the sample is applied to the preview. An invalid selector shows a short message rather than breaking the page.