Chrome DevTools: Search your HTML elements by CSS selector in the Elements Panel
Last updated: 4th March 2021
Introduction
When searching within the Elements panel, you can find elements by their CSS Selector. For example:
a[href]
- finds all anchors with a href attribute.li a
- finds all anchors which are descendants of list items.
How to use this feature
To search for nodes by their CSS selectors, use the shortcut: CMD / Ctrl + F.
This means you can search for .summary h3
to cycle through all h3
elements which are descendants of elements with a class of summary
.
Related resource
I've covered a few other tricks in the Elements Panel, such as editing HTML, Copying as CSS selector, and re-arranging elements.