tool · one of 34free, no counter
Selector
How many elements does this selector actually match, and where are they?
A selector either matches what you meant or it matches something else, and the difference is invisible until something looks wrong. The browser will answer the question in a console, as one call nobody types, returning a list that highlights rows in a tree - which tells you *how many* and never *where*. This draws the answer on the page instead: every hit outlined at once, the count exact, and Next walking a solid outline through them. The third number is the one that settles most arguments - how many of those matches have no box at all, because an element that is laid out at zero by zero matches perfectly and styles invisibly.
Reach itPress ⌘+K on any tab and type selector.Ctrl+Kon Windows and Linux
TWO BUILDS9 browsers
Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome buildin the panel · free, no counter
What this actually is
run a selector against the page and outline every element it matchesA rule that is not applying and looks correct. A selector copied out of a stylesheet that you want to check against the page before editing it. Working out whether `:nth-child` counts what you think it counts on real markup. And the case a console cannot help with at all: a selector that matches, but matches one element more than you meant, somewhere further down a page you have not scrolled to.
The three numbers, and why one selector needs all of them
a count on its own is what makes people think a selector works- matches
- Every element in the document, uncapped. This is the number the console would give and it is exact however large the page is.
- no box
- Matched, and laid out at zero by zero. A `display: none`, an empty inline, a collapsed parent. This is the commonest reason a rule appears not to apply, and a total that folds these in reads as a clean twelve when nine of them can never be seen.
- outlined
- What is drawn and listed, which stops at two hundred. Neither a list nor a field of rectangles is readable past that; the count above stays exact, because the count is what was asked for.
- not a selector
- Told apart from matching nothing, and drawn differently. A typo and an honest empty result are both zero rows, and only one of them is a mistake - `:contains()`, `:visible` and `:eq()` are jQuery extensions that were never CSS and are the usual cause.
Asked about this tool
5 of themHow is this different from Ctrl+F in the Elements panel?
That searches the tree and highlights rows in it. This outlines the elements on the page, all of them at once, and steps through them in place - so the answer to "which ones" is a picture rather than a scroll through a tree. It also separates the matches that have no box, which is the question underneath most of the times a selector looks wrong.
Does it change the page?
No. The outlines are drawn on our own layer over the page, not into it, and they come off when you leave the tool or clear the field. Nothing is written to the document and nothing is stored.
Why does the count differ from the console?
Because LoupeKit’s own surfaces are excluded. A `div` or a `*` matches the floating panel and the page bar, and a tool that counted those would be answering about itself. The number of excluded nodes is printed rather than quietly subtracted.
Does it support XPath?
No - CSS selectors only, which is what `querySelectorAll` takes. Adding a second query language would mean a second set of failure modes to explain, and the demand for it is a fraction of the demand for this.
Can it edit what it matched?
Not from here. Stepping to a match selects nothing and turns no mode on: walking twelve hits to find one should not change what an edit reaches, twelve times. The inspector is where an element is edited, and the outline tells you which one to click.
TWO BUILDS9 browsers
Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome build63 of these · no host permissions · three free audits