Highlight Specific Elements

29 September 2020

Updated: 03 September 2023

You can highlight all HTML elements which respond to a specific CSS selector with the following. This can be useful for debugging purposes:

1
document
2
  .querySelectorAll(selector)
3
  .forEach((el) => (el.style.border = 'solid 2px red'))

For example, the following [id] selector will find all elements with an id attribute:

1
document
2
  .querySelectorAll('[id]')
3
  .forEach((el) => (el.style.border = 'solid 2px red'))