CSS Selector Lens

Smart CSS selector suggestions in Chrome DevTools. Select any element to instantly see child, pseudo-class & attribute selectors.

CSS Selector Lens adds a powerful panel directly inside Chrome DevTools that instantly suggests CSS selectors as you inspect elements. ✅ KEY FEATURES: • Smart child & descendant selector suggestions • Pseudo-class selectors (:hover, :first-child, :nth-child, etc.) • Attribute selectors based on real element attributes • One-click copy to clipboard • Adjustable selector depth (up to level 6) • Works on any website — no configuration needed 🔧 HOW TO USE: 1. Open Chrome DevTools (F12 or right-click → Inspect) 2. Click the "CSS Selector Lens" panel tab 3. Select any element in the Elements panel 4. See instant CSS selector suggestions in the panel 5. Click any selector to copy it to your clipboard Perfect for front-end developers, CSS authors, and QA engineers who want to write precise, targeted CSS selectors quickly. 🔒 PRIVACY: This extension operates entirely within your browser. It does not collect, transmit, or store any personal data or browsing history. All selector generation happens locally in your browser.