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.

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.