DevTools Tips

Copy CSS selector of an element

Categories: Supported by:

Sometimes we need to uniquely identify an element that lacks an identifier, so that it can be referenced in JavaScript and other places. All the major browsers have an option to build a unique CSS selector for an element and then copy it to the clipboard.

In the Element tree, right click on the element and select,

This will copy the CSS selector for the element, which can then be used in JavaScript to reference the element in the following way,

> document.querySelector("#maincontent > div > h2")
<h2>104 DevTools Tips</h2>

Screenshot of Edge DevTools, showing how to access the Copy CSS selector option