CSS Selector Lens door Ankur Gandhi

CSS Selector Lens is a developer-focused DevTools extension that instantly suggests CSS child selectors, descendant selectors, pseudo-class selectors, attribute selectors, and ancestor path selectors for any element on the page.

✨ Features

• Instant Selector Suggestions — Scans the page DOM and lists relevant CSS selectors grouped by type (Base, Child, Descendant, Pseudo, Attribute, Ancestor Paths)
• DevTools Panel — Integrated directly into the Firefox Developer Tools as a dedicated panel
• Sidebar View — Element-aware sidebar that updates automatically as you click elements in the Inspector
• Live Search & Filter — Search and filter selectors by type in real time
• One-Click Copy — Click any selector to copy it to your clipboard instantly
• Page Overlay — Optional floating overlay on the page for quick pick-and-inspect workflow
• Customizable Options — Control selector depth (1–6), enable/disable selector types, manage pseudo-class lists, and more

🛠️ How to Use

1. Open Firefox DevTools (F12 or Right-click → Inspect)
2. Navigate to the CSS Selector Lens panel tab
3. Click Rescan or select any element in the Inspector
4. Browse, search, filter, and copy selectors instantly

🔒 Privacy

This extension does not collect, transmit, or store any personal data. All processing happens locally in your browser. No analytics, no tracking, no external requests.

Perfect for front-end developers, QA engineers, and anyone who writes CSS or runs automated tests.