Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.
Copy CSS selector of an element
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,
- In Chrome and Edge,
Copy>Copy selector - In Firefox,
Copy>CSS Selector - In Safari,
Copy>Selector Path
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>
