How to use the css selector tester
- Paste the HTML you want to test against. A small menu is already in the box.
- Type a CSS selector, such as li.item > a or #menu a[href^="/"].
- Read how many elements match and the list below, with each match's path and opening tag.
- Change the selector and the list updates as you type.
Links inside list items
With the sample menu, the selector .item matches the three list items, and li.item > a matches the three links inside them. The selector li.active matches only the first item.
The selector a[href^="/"] matches links whose address starts with a slash, which here is two of the three. The match list shows each one as a path such as html > body > ul > li:nth-of-type(2) > a.
How matching works
Your HTML is parsed by the browser into a separate, inactive document, and your selector is run on it with querySelectorAll. The match is therefore what your own browser would return. The parsing adds missing html, head and body elements the way browsers do, so a fragment such as a list still works.
The document is inert: scripts in it do not run, event attributes do nothing and images or other resources are not loaded. Only the opening tag of each match is shown, and its text is displayed as plain text. Large inputs are limited to 1,000,000 characters and only the first 200 matches are listed, though the full count is shown.
Selectors that cannot match
A static copy of the HTML has no mouse position, focus or form state. Selectors such as :hover, :focus, :active, :visited, :target and often :checked or :disabled based on user action will not match, even though they work on a live page. Selectors for pseudo-elements such as ::before also match nothing because they are not elements.
If the selector is invalid, the tool says so instead of showing an empty list. For text patterns use the regex tester, for data paths the JSONPath tester, and to tidy your styles the CSS formatter. The HTML table generator can build markup to test with.
Assumptions and limits
- Matching is done by the browser you are using, so results follow its selector support.
- The HTML is treated as a document and is never rendered or executed here.
- State based pseudo-classes and pseudo-elements do not match in a static document.
- Only the first 200 matches are listed.
Frequently asked questions
Can I test a selector without opening developer tools?
Yes. Paste the HTML and the selector here and the matches are listed with their paths. No page needs to be open.
Is the HTML I paste run or loaded?
No. It is parsed into an inactive document. Scripts do not run and images and other resources are not fetched.
Why does my :hover selector find nothing?
Hover depends on the mouse, which a static copy of HTML does not have. Test those selectors on the live page.
What does the path column show?
It is a route from the html element to the match, using tag names and nth-of-type positions where siblings share a tag.