Stop Guessing.
Instant CSS Selector
Suggestions in DevTools.
Click any element in the Elements / Inspector panel and instantly see every child selector, descendant path, pseudo-class variant, and attribute selector — with syntax highlighting and one-click copy.
No account · No data collected · Works on any website
What Is CSS Selector Lens?
Your DevTools Just Got
a Superpower
CSS Selector Lens is a free browser extension for Chrome and Firefox that plugs directly into DevTools. Select any element and instantly get a complete list of every CSS selector you can write for it — child combinators, descendant paths, pseudo-class variants, attribute selectors, and full ancestor chains.
Whether you’re writing CSS, building test automation, scraping data, or overriding theme styles — this tool eliminates the guesswork and saves you real time.
Core Features
Everything You Need,
Built Right Into DevTools
Six powerful capabilities. Zero extra tools. Works the moment you install it.
Inspector Sidebar Pane
A dedicated sidebar in the Elements / Inspector panel that auto-refreshes every time you select a different element. Selectors appear instantly — no re-scan, no clicking.
Chrome & FirefoxFull DevTools Panel
A standalone “CSS Selector Lens” tab in DevTools scans the entire page DOM. Use the live search bar and filter buttons (Child, Descendant, Pseudo, Attribute, Ancestor) to find exactly what you need.
Search + FilterFloating Overlay + Pick Mode
A draggable floating panel you can open on any live page. Activate Pick Mode, hover over elements to see a teal highlight ring, click to generate selectors — all without opening DevTools.
Live InteractionSyntax-Coloured Output
Every selector is colour-coded just like your IDE — IDs in amber, classes in cyan, pseudo-classes in purple, attribute selectors in orange, combinators in grey. Read at a glance.
VS Code StyleLive Match Count Badge
Each selector shows how many elements it currently matches on the page. Instantly know if a selector is perfectly unique (1 match) or dangerously broad (50+ matches) before you use it.
Precision ToolGranular Settings Control
Set scan depth (1–6 levels), toggle selector types individually, and handpick exactly which pseudo-classes to include. Settings sync across sessions via browser storage.
Fully CustomisableHow It Works
Up and Running in 60 Seconds
Three steps. No configuration. No account. No page reload.
Install the Extension
Add CSS Selector Lens from the Chrome Web Store or Firefox Add-ons. One click, zero permissions beyond storage and clipboard. Works immediately.
Open DevTools & Inspect
Press F12 or right-click → Inspect. Open the CSS Selector Lens tab or find the sidebar in the Inspector panel. Click any element on the page.
Search, Filter & Copy
Browse colour-coded selectors grouped by type. Filter by Child, Descendant, Pseudo, Attribute or Ancestor. Click any row to copy it straight to your clipboard.
Selector Categories
Six Types. Real Examples.
From Your Actual DOM.
Every selector is generated live from the page you’re currently inspecting — not hypothetical, not generic.
›
Direct child combinators — target only immediate children, not deeper descendants. Perfect for scoped, specific selectors.
Space-separated paths — match elements nested at any depth inside a parent. Great for loose, reusable selectors.
State-based selectors generated for every element — hover, focus, active, checked, disabled, first-child and more.
Targets elements by their data-* attributes and ARIA roles — essential for scraping, testing, and ARIA-based styling.
Full contextual chains walking up the DOM — shows the complete selector path from a distant ancestor down to your element.
Qualified selectors that pair the HTML tag with a class — more specific than class alone, avoids cross-tag collisions.
Settings
You’re in Full Control
A full three-section settings page lets you tailor every aspect of CSS Selector Lens to your workflow.
⚙ General Settings
Auto-refresh on Element Select
Sidebar automatically updates when you click a different element in the Inspector panel — no manual re-scan needed.
Show Match Count Badge
Displays how many elements each selector matches on the current page — helps you write precise, non-greedy selectors first time.
◎ Suggestion Types
Child Selectors
.parent > .child — Direct child combinators only.
Descendant Selectors
.parent .child — Space-separated descendants at any depth.
Pseudo-class Suggestions
:hover, :focus, :first-child, :not() and more — select exactly which ones to include.
Attribute Selectors
[data-*] and ARIA attributes detected live from the DOM.
Tag + Class Combos
button.primary, span.label — Qualified, specific selectors.
Browser Support
Chrome vs Firefox —
Same Power, Both Browsers
Both versions share the same core engine. Here are the platform-specific differences.
| Feature | 🟡 Chrome Extension | 🟠 Firefox Add-on |
|---|---|---|
| Manifest Version | MV3 — latest standard | MV2 — Firefox standard |
| DevTools Panel Tab | ✓ Full panel | ✓ Full panel |
| Inspector Sidebar Pane | ✓ Elements sidebar | ✓ Inspector sidebar |
| Floating Overlay + Pick Mode | ✓ via Scripting API | ✓ via background.js |
| Attribute Filter Tab (sidebar) | Panel only | ✓ Panel & sidebar |
| Selector Tooltip on Overflow | ✓ Panel hover | ✓ Sidebar hover |
| Depth Setting (1–6 levels) | ✓ | ✓ |
| One-click Copy to Clipboard | ✓ | ✓ |
| Auto-rescan on Navigation | ✓ | ✓ |
| Data Collected / Sent | None | None |
| Minimum Browser Version | Chrome 88+ | Firefox 109+ |
Who Is It For?
Built for Every Developer
Who Touches the DOM
CSS Selector Lens fits naturally into a wide range of developer workflows — front-end, backend, QA, and beyond.
Front-End Developers
Stop manually reading the DOM tree. Click any element and get the exact child and descendant selectors you need to style it — with context on how many elements match.
QA & Test Automation
Get reliable, unique selectors for Playwright, Puppeteer, Cypress, and Selenium. The match count badge immediately tells you if a selector is stable enough for a test assertion.
Web Scrapers & Data Engineers
Identify stable, meaningful selectors for Python (BeautifulSoup, Scrapy) or JavaScript scripts. Ancestor path chains give you the full contextual selector chain instantly.
WordPress & Theme Developers
Override WooCommerce, Elementor, or block theme styles precisely — without resorting to !important. Get the exact specificity chain the extension generates.
CSS Learners & Students
See how real websites are structured with live DOM selectors. An interactive way to understand child vs descendant vs pseudo-class selectors using actual page examples.
Browser Extension Developers
Quickly find DOM injection points and element targets for your own extensions or userscripts. The floating overlay Pick Mode is especially useful for this workflow.
Browser Support
Chrome vs Firefox —
Same Power, Both Browsers
Both versions share the same core engine. Here are the platform-specific differences.
| Feature | 🟡 Chrome Extension | 🟠 Firefox Add-on |
|---|---|---|
| Manifest Version | MV3 — latest standard | MV2 — Firefox standard |
| DevTools Panel Tab | ✓ Full panel | ✓ Full panel |
| Inspector Sidebar Pane | ✓ Elements sidebar | ✓ Inspector sidebar |
| Floating Overlay + Pick Mode | ✓ via Scripting API | ✓ via background.js |
| Attribute Filter Tab (sidebar) | Panel only | ✓ Panel & sidebar |
| Selector Tooltip on Overflow | ✓ Panel hover | ✓ Sidebar hover |
| Depth Setting (1–6 levels) | ✓ | ✓ |
| One-click Copy to Clipboard | ✓ | ✓ |
| Auto-rescan on Navigation | ✓ | ✓ |
| Data Collected / Sent | None | None |
| Minimum Browser Version | Chrome 88+ | Firefox 109+ |
Who Is It For?
Built for Every Developer
Who Touches the DOM
CSS Selector Lens fits naturally into a wide range of developer workflows — front-end, backend, QA, and beyond.
Front-End Developers
Stop manually reading the DOM tree. Click any element and get the exact child and descendant selectors you need to style it — with context on how many elements match.
QA & Test Automation
Get reliable, unique selectors for Playwright, Puppeteer, Cypress, and Selenium. The match count badge immediately tells you if a selector is stable enough for a test assertion.
Web Scrapers & Data Engineers
Identify stable, meaningful selectors for Python (BeautifulSoup, Scrapy) or JavaScript scripts. Ancestor path chains give you the full contextual selector chain instantly.
WordPress & Theme Developers
Override WooCommerce, Elementor, or block theme styles precisely — without resorting to !important. Get the exact specificity chain the extension generates.
CSS Learners & Students
See how real websites are structured with live DOM selectors. An interactive way to understand child vs descendant vs pseudo-class selectors using actual page examples.
Browser Extension Developers
Quickly find DOM injection points and element targets for your own extensions or userscripts. The floating overlay Pick Mode is especially useful for this workflow.