Find elements by CSS selector

Type any CSS selector and Screen Ruler highlights every element it matches on the page, counts them, and lets you step through each one.

What it does

CSS Selector Search is a find box for page structure. Instead of searching for text, you search with a selector such as .card, #checkout or a[target="_blank"], and every element it matches is outlined on the page.

• Every visible match is highlighted at once, and the first is scrolled into view.
• A counter in the popover header shows your position, for example 3/17.
• Up and down arrows step through the matches, scrolling each one to the middle of the screen.
• Hidden matches are counted separately. If a selector also matches elements that are not displayed, the header says so, for example 3/17 (4 hidden), so the count and what you see never quietly disagree.

How to search by selector

1. Start Screen Ruler by clicking its toolbar icon, pressing Alt + Shift + S (Option on a Mac), or right-clicking the page and choosing Screen Ruler.
2. Press 7, or click Find Element in the control bar.
3. Type a selector into the CSS Selector field. Results update as you type.
4. Use the arrows in the popover header to move between matches.

Close the popover with its close button. The highlights clear, and your last query is filled back in the next time you open it.

What selectors you can use

The search uses the browser's own selector engine, so any selector that is valid in your stylesheet works here:

• Classes, IDs and tags: .btn, #nav, img.
• Attributes: [data-testid], a[href^="http"], img:not([alt]).
• Combinators: nav > ul > li, h2 + p.
• Structural pseudo-classes: li:nth-child(odd), section:has(video).
• Lists: h1, h2, h3.

An incomplete selector you are still typing simply shows no matches, so there are no error popups to dismiss. The search also looks inside open shadow roots, so elements in web components are found too.

In Responsive Mode

With Responsive Mode on, a search runs in every viewport at once and the counter pools the results, so you can step through matches across all your device sizes. Because hidden matches are counted per viewport, this is a quick way to see which elements a breakpoint hides at each width.

When it is useful

• Testing a selector before you use it in CSS, a test script or a scraper, to confirm it matches what you think and nothing else.
• Audits. Find every image without alt text with img:not([alt]), or every link that opens a new tab.
• Checking tracking hooks. Confirm a data- attribute is present on every button that needs it.
• Getting your bearings on an unfamiliar codebase by finding where a class is used on the page.

Tips

• Start broad, then narrow. Type button to see every button, then add a class or attribute and watch the count drop to the ones you mean.
• Check a selector is unique. If a selector meant for one element shows 1/3, it will style or click three things, not one.
• Use it with other overlays. Highlights stay visible alongside the X-Ray Mode outlines and the rulers, and while inspection is paused.

Found what you were looking for? Click it to inspect the element in the side panel. CSS Selector Search is part of Screen Ruler's Inspect and Studio plans, and every install starts with a free 7-day trial with everything unlocked, no card required.

Common questions

How do I find an element by CSS selector in Chrome?

In DevTools you can press Ctrl + F in the Elements panel and type a selector, which jumps through the DOM tree. With Screen Ruler, press 7 and type the selector: every match is highlighted on the page itself, with a count and arrows to step through them.

Why does the count say some matches are hidden?

The selector matched elements that are not displayed, for example a mobile menu hidden at desktop width. Those cannot be highlighted or scrolled to, so they are listed as a separate hidden count instead.

Does it support :has() and other modern selectors?

Yes, as long as your browser supports them. The search runs on the browser's native selector engine, so anything valid in CSS works.

Is CSS Selector Search free?

It is part of the Inspect and Studio plans. Every install starts with a 7-day free trial with all features unlocked.