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:
Select an element, then go to the Styles tab and then hover over a CSS selector.
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.
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.