How to find CSS selector in Chrome?

Discover how to efficiently locate CSS selectors in Chrome with this concise guide. Master the essential steps to streamline your data extraction tasks and troubleshoot common selector issues effectively.

Best practices

Use the Chrome DevTools by right-clicking on the webpage and selecting "Inspect" to access the Elements panel where you can explore the HTML structure.
In the Elements panel, hover over the HTML elements to see the corresponding part of the webpage highlighted, helping you identify the correct element more easily.
Right-click on the desired element in the Elements panel and select "Copy" > "Copy selector" to accurately capture the CSS selector for use in your code.
Utilize the Console tab to manually test selectors by using `document.querySelector("YOUR_SELECTOR_HERE")` to ensure they select the intended element.

// Open Chrome and navigate to the target webpage, e.g., https://sandbox.oxylabs.io/products 
// Right-click on the element you want to inspect and select "Inspect". 

// Method 1: Use the Elements panel
// In the Elements panel, right-click on the highlighted code snippet that corresponds to your element. 
// Choose "Copy" > "Copy selector" to get the CSS selector. 

// Method 2: Use the Console panel
// Click on the Console tab next to Elements. 
// Type document.querySelector("YOUR_ELEMENT_HERE") and replace YOUR_ELEMENT_HERE with a guess of the element's tag or class.
// Press Enter to see if it selects the element you intended. 

// Method 3: Use Chrome DevTools' DOM Tree
// Hover over different parts of the DOM tree in the Elements panel. 
// Chrome will highlight the corresponding part of the webpage. 
// Once you find the element, you can see its CSS path directly in the DOM tree.