How to Copy a CSS Selector of a Page Element
In some cases, when you need to locate a page element, you’ll want to get its CSS selector. Here’s a quick guide to do
that using your browser’s developer tools.
Step 1: Open your website and find the target element
- Open the page containing the element (text, button, link, image, etc.) you want to locate in your browser.
- Right-click the element and choose Inspect from the menu. This will open the developer tools and highlight the
element’s code.
Right click and select Inspect
Step 2: Copy the CSS selector
- Right-click the highlighted HTML code in the developer tools.
- Hover over Copy, then select Copy selector from the submenu.
- This will copy a unique CSS selector for the element to your clipboard.
For example, in the screenshot below, the CSS selector for the example element is:
#ProductInfo-template--19525913411799__main > div.product__title > h1
Copy selector in developer tools