Calculator
What the CSS Selector Tester does
CSS Selector Tester: checks Status, Matched elements and Matches from HTML, CSS selector and Extract attribute (optional, e.g. href). Example: CSS selector ul.nav a[href^="/"]:not(.active) and extract attribute (optional, e.g. href) href gives status Needs a browser.
Give the CSS Selector Tester your HTML, CSS selector and Extract attribute (optional, e.g. href) and it works out Status, Matched elements and Matches. Adjust anything and the figures re-derive on the spot.
Most people who open the CSS Selector Tester are engineers checking an encoding. Pasting a production payload into an unknown web tool is a real risk, which is why this one stays local.
No sign-up, no data collection, no processing queue, just code running locally.
The field table, the method and a worked example are documented after the tool for anyone who wants to check the working.
What do the CSS Selector Tester fields mean?
The CSS Selector Tester uses 3 inputs. A filled form means you can test one idea immediately instead of sourcing every input first.
| Field | What to enter | Default |
|---|---|---|
| HTML | paste or type any amount of text | <ul class="nav"> <li><a href="/home" class="active">Home</a></li> <li><a href="/docs">Docs</a></li> <li><a href="https://example.com" target="_blank" rel="noopener">External</a></li> </ul> <p data-id="7">Footer</p> |
| CSS selector | required | ul.nav a[href^="/"]:not(.active) |
| Extract attribute (optional, e.g. href) | optional | href |
How does the CSS Selector Tester work?
Each output is derived from the inputs above in a single pass; there is no hidden state carried between runs, so the same inputs always give the same check.
Each field is verified before use; failures are reported explicitly rather than swallowed.
Worked example
These are the values the CSS Selector Tester loads by default, and the result it produces from them. Below is the same computation the tool performs on load, step by step.
| HTML | <ul class="nav"> <li><a href="/home" class="active">Hom… |
|---|---|
| CSS selector | ul.nav a[href^="/"]:not(.active) |
| Extract attribute (optional, e.g. href) | href |
| Status | Needs a browser |
|---|---|
| Matched elements | |
| Matches | 0 |
How to use it
- Paste your content into HTML.
- Put CSS selector.
- Key in Extract attribute (optional, e.g. href).
- Results update continuously rather than on submit.
- Check Status, Matched elements and Matches on the right.
- Copy Link when you want to return to this exact configuration; Print when someone needs it on paper.
What this tool does not do
- Processing happens in your browser, so extremely large inputs are bounded by available memory.
- Output follows the common convention for this format; a specific toolchain may have its own house style.
- Intermediate steps are rounded only for display; if you need full precision, work from the source figures.
Frequently asked questions
Only HTML, CSS selector and Extract attribute (optional, e.g. href). Every box already holds a working value, so the form is usable immediately, without filling anything in first.
With the values loaded when the page opens, status comes out as Needs a browser. Adjust any field to see how much the answer depends on it.
No. The work runs in JavaScript inside this page, so your values never leave your device. You can confirm it in your browser network tab.
No charge. Everything on the page is available without signing in.
It is accurate to the method shown. Rounding only affects what is displayed, never what is computed.