Skip to content

Highlight All Elements that Match a given CSS Selector

DevTools: Highlight all Elements that Match a given CSS Selector

When you select an element in DevTools, you see the CSS rules that apply to it.

But, these rules can also apply to other elements in the page.

Let’s see how to easily spot which elements will be affected when you change a CSS rule.

🎥 Check out this video for a showcase of this functionality:

Chromium-based browsers

Select an element, then go to the Styles tab and then hover over a CSS selector.

Chrome DevTools: Highlight all Elements that Mach a given CSS Selector


Firefox

Firefox is a bit trickier.

Select an element, then go to the Styles panel, and then click the Highlight all elements matching this selector button next to the CSS rule.

Firefox DevTools: Highlight all Elements that Mach a given CSS Selector

Let me know what you think about this article in the comments section below.

If you find this article helpful, please share it with others and subscribe to the blog to support me, and receive a bi-monthly-ish e-mail notification on my latest articles.   
  

Comments