Highlight all elements on the page that match a given CSS selector 관련

Google Chrome > Article(s)

---

Article(s)

Firefox > Article(s)

---

Article(s)

Safari > Article(s)

---

Article(s)

---

Highlight all elements on the page that match a given CSS selector | Devtools Tips

---

Highlight all elements on the page that match a given CSS selector

When you select an element in DevTools (in the Elements or Inspector tool), you see the CSS rules that apply to it. But, these rules can also apply to other elements in the page than the currently selected one.

To see all the elements that match a given CSS rule selector, and therefore know which elements will be impacted if you change that rule:

Firefox

Select an element in the Inspector tool, then click the [Highlight all elements matching this selector] button next to a CSS rule in the Styles pane:

Firefox, with a webpage showing 3 highlighted elements, and the button enabled in the Styles pane

Chrome, Edge, or Safari

Select an element in the Elements tool, then hover over a CSS selector in the Styles pane:

Edge, with a webpage showing 3 highlighted elements, and a CSS selector hovered in the Styles pane

Polypane

Select an element in the Elements panel, then click the [Highlight all elements matching this selector] button next to a CSS rule in the Styles tab:

Polypane, with three panes showing a website. in each pane there is a highlighted element. There is a button enabled in the Styles tab

See also

• Highlight the effect of individual CSS properties on hover
• Copy an elements styles
• Highlight all the elements that a CSS rule matches
• Tweak css grid and flexbox alignment properties