CSS Selector Tester

Paste a chunk of HTML on the left and a CSS selector on the right. The matched elements highlight in the live preview frame and a row per match tells you the tag, id, classes, text preview and a short selector path. Pure client-side — the preview is sandboxed, nothing is uploaded.

Scripts, styles, and inline event handlers are stripped before the preview is mounted.

Standard CSS selector syntax. Comma lists supported.

0 matches
— evaluated in
0 total elements
0 distinct tag(s)
Live preview Matched elements are outlined.
Match list Click a row to focus its element in the preview.

    Selector cheat sheet

    A reminder of the most useful patterns. Anything below also works as a comma list (e.g. h1, h2, h3).

    • div — tag name
    • .note — class
    • #main — id
    • div.note — tag with class
    • ul > li — direct child (no descendants)
    • article p — descendant (any depth)
    • li:first-child / :last-child / :nth-child(2)
    • a[href^="https"] — attribute starts with
    • a[href$=".pdf"] — ends with
    • input[type="checkbox"]:checked — checked inputs
    • p:not(.lead) — negation
    • h1, h2, h3 — comma list (any of these)