Chrome DevTools: Search your HTML elements by CSS selector in the Elements Panel

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.