How to Find CSS Selector in Chrome?

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 on the page, 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.
Press Ctrl+F (or Cmd+F on Mac) in the Elements panel to open the search box and test CSS selectors.
Alternatively, utilize the Console tab to manually test selectors by using document.querySelector("SELECTOR_HERE").

# 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 the element's tag or class.
# For example, use h4.
# 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.