How to extract CSS selectors using Chrome
Finding the CSS selector of an element you want to scrape can be tricky at times. This is why we can use the Inspect Element feature in most modern browsers to extract the selector with ease.
The process is very simple, first we find the element, right click on it, we then click on Inspect Element. The developer tools window will show up with the element highlighted. We then right click on the selected HTML code, go to Copy, and click on Copy selector.
For example, let’s say we want to scrape the FAQ title in ScrapingBee’s home page.
We first right click on the element → Inspect:
Then right click on the HTML highlighted code and go to Copy like this:
And finally click on copy selector:
And that will do it! You now have the CSS selector of that element, and you can use features like data extraction or js_scenario to interact with it.