Top 5 CSS Selectors You Need to Know When Web Scraping


Web scraping can get complicated at times, especially when you are dealing with websites that come with constantly changing structures or are simply hard to scrap with the simple point-and-click interface. But the good thing is that there is always a way around in the digital world, so there is nothing to stress about.

In order to work out complicated and changing web structures to get data on your competitors, you need to learn about the CSS selectors that can help you work around the structure and get you the data that you need. If you are just starting then here is the list of the topmost frequently used 5 CSS selectors that you need to know about;

1-     :contains

In case you only want to select specific text from a log, the contain selector can help you locate and retrieve the exact text that you wish to extract using the web scraper. Using this CSS selector, you can get data from a specific category instead of scrapping all the data from the web page.

2-     :not(:contains)

If the scenario is completely different from the one mentioned above and you need data that contains everything except a specific characteristic, then the “not(: contains)” CSS selector would be most suitable for you. For instance, if you wish to select all the dresses except the silk ones then you can type in “not(: contains(silk))” and you will get all results except the silk dresses.

3-     >

The greater-than sign is a more complex selector used by more experienced individuals trying to scrape data from the web. It allows you to select the direct “child” element of your chosen selector. It is more precise and makes it possible for you to extract data when the selected element is found at multiple locations on the site.

4-     :has

As the name suggests, this selector allows you to locate, select, and retrieve elements with specific attributes hidden inside of it. For instance, when scraping data from a clothing store, you can use the attribute to extract all the dresses with the lace dresses with the color black. It will give you all the black dresses available and also the dresses that have black as an option for the color.

5-     ~

Lastly, if you wish to extract all the elements next to a specific element, then the “~” comes in handy. But remember that it only retrieves data which is at the same structural level as the main element. You can use it to extract all the relevant data to specific products if positioned next to it. It comes in handy when scraping data off your competitors’ sites.


These are only a few of the CSS selectors for web scraping which can help you bypass the various web page structures. But the good thing is that you can always customize new ones based on your requirements. However, remember that it will take you time to master the art, but once you do – you will be a data master, scrapping required data from the web in no time using the most accurate selectors.


Please enter your comment!
Please enter your name here