Web Tools tools.bryantsmith.com

Creative Workflow Helpers

CSS Selector Match Tester

Test CSS selectors against your own HTML and instantly see which elements match. Runs entirely in your browser — your HTML never leaves the page.

Runs in your browser v1.0.0

Selector

querySelectorAll

Try .card, #navigation, article > h2, input[type="email"], ul li:first-child, .item:not(.disabled).

HTML source

inert sandbox

Parsed in an inert sandbox: scripts, event handlers and embedded frames never run.

Matches

live

How it works

Your HTML is parsed with the browser’s own DOMParser into an inert document and queried with querySelectorAll(). It is never inserted into this page, so pasted scripts and event handlers cannot run. Invalid selectors are reported as a friendly error instead of a browser exception.

Related tools

  • DOM Diff ViewerCompare two HTML fragments structurally to see exactly which elements, attributes and text changed — entirely in your browser.
  • Apache Rewrite TesterTest Apache mod_rewrite rules against a sample request path and see the rewritten URL, redirects, captures and warnings.
  • .env Compare & MergeCompare development, staging, and production .env key sets without exposing secret values, then build a merged template.
  • Accessible Name CalculatorPaste HTML, pick an element, and see the accessible name assistive technology computes — entirely in your browser.
  • Cookie Builder & InspectorBuild a Set-Cookie header or paste one to inspect its expiry, path, domain, Secure, HttpOnly and SameSite attributes — entirely in your browser.
  • CORS Header Builder & ExplainerModel a cross-origin request and get the exact CORS response headers to send, explained in plain language.

More Creative Workflow Helpers tools