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.
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
