[Answers](https://scrapfly.io/blog)   /  [css-selectors](https://scrapfly.io/blog/tag/css-selectors)   /  [XPath vs CSS selectors: what's the difference?](https://scrapfly.io/blog/answers/xpath-vs-css-selectors)   # XPath vs CSS selectors: what's the difference?

 by [Bernardas Alisauskas](https://scrapfly.io/blog/author/bernardas) Dec 15, 2022 1 min read [\#css-selectors](https://scrapfly.io/blog/tag/css-selectors) [\#xpath](https://scrapfly.io/blog/tag/xpath) 

 [  ](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fscrapfly.io%2Fblog%2Fanswers%2Fxpath-vs-css-selectors "Share on LinkedIn")    

 

 

[Parsing HTML with Xpath](https://scrapfly.io/blog/posts/parsing-html-with-xpath) and [CSS selectors](https://scrapfly.io/blog/posts/parsing-html-with-css) are both used to parse HTML when web scraping. Both of these are small path languages that perform the same function. So, what's the difference?

Generally, **CSS selectors are more brief and popular** as it's the same language used to apply styles in web development. However, **XPath selectors are more powerful** though a bit more complex.

In particular, XPath offers these 3 advantages over CSS selectors:

- Traverse up the HTML tree, i.e. select element parent nodes.
- Find elements by text value.
- Easily define custom functions and more built-in functions like regular expression matching.

When web scraping, it's best to mix both to take advantage of the strengths of these two different tools. For example, let's take a look at this example page and how CSS and XPath selectors can be used to their strengths:

html```html
<div class="product">
  <div class="price">
    <div data-price="22.84">$22.84</div>
  </div>
  <div>
    <div>Company Name inc.</div>
    <div>
      <div>website: <a href="http://example.com">example.com</a></div>
    </div>
  </div>
</div>
```



To extract the price we can use a simple CSS selector:

shell```shell
.product>.price::attr(data-price)
```



However, CSS selectors cannot find elements by their text value or navigate up the HTML tree. So, to select `Company Name inc.` we'd have better luck with XPath:

shell```shell
//div[contains(text(),'website:')]/../../div[1]/text()
```



In the example above we're finding a `div` element that contains text `website:`, then select its grandparent and the first `div` child which is the name of the company!

To summarize XPath vs CSS selectors - both are great tools for parsing HTML though CSS selectors are briefer and easier to use while XPath is more powerful but more verbose and complex. Luckily, most programming languages support both and when web scraping we're best to mix these two technologies!



 

    



Scale Your Web Scraping

Anti-bot bypass, browser rendering, and rotating proxies, all in one API. Start with 1,000 free credits.

  No credit card required  1,000 free API credits  Anti-bot bypass included 

 [Start Free](https://scrapfly.io/register) [View Docs](https://scrapfly.io/docs/onboarding) 

 Not ready? Get our newsletter instead. 

 

## Explore this Article with AI

 [ ChatGPT ](https://chat.openai.com/?q=Summarize%20this%20page%3A%20https%3A%2F%2Fscrapfly.io%2Fblog%2Fanswers%2Fxpath-vs-css-selectors) [ Gemini ](https://www.google.com/search?udm=50&aep=11&q=Summarize%20this%20page%3A%20https%3A%2F%2Fscrapfly.io%2Fblog%2Fanswers%2Fxpath-vs-css-selectors) [ Grok ](https://x.com/i/grok?text=Summarize%20this%20page%3A%20https%3A%2F%2Fscrapfly.io%2Fblog%2Fanswers%2Fxpath-vs-css-selectors) [ Perplexity ](https://www.perplexity.ai/search/new?q=Summarize%20this%20page%3A%20https%3A%2F%2Fscrapfly.io%2Fblog%2Fanswers%2Fxpath-vs-css-selectors) [ Claude ](https://claude.ai/new?q=Summarize%20this%20page%3A%20https%3A%2F%2Fscrapfly.io%2Fblog%2Fanswers%2Fxpath-vs-css-selectors) 



 ## Related Articles

 [  

 data-parsing css-selectors 

### Parsing HTML with CSS Selectors

Introduction to using CSS selectors to parse web-scraped content. Best practices, available tools and common challenges ...

 

 ](https://scrapfly.io/blog/posts/parsing-html-with-css) [  

 data-parsing xpath 

### Ultimate XPath Cheatsheet for HTML Parsing in Web Scraping

Ultimate companion for HTML parsing using XPath selectors. This cheatsheet contains all syntax explanations with interac...

 

 ](https://scrapfly.io/blog/posts/xpath-cheatsheet) [  

 python data-parsing 

### Parsing HTML with Xpath

Introduction to xpath in the context of web-scraping. How to extract data from HTML documents using xpath, best practice...

 

 ](https://scrapfly.io/blog/posts/parsing-html-with-xpath) 

  ## Related Questions

- [ Q Selenium: geckodriver executable needs to be in PATH? ](https://scrapfly.io/blog/answers/selenium-geckodriver-in-path)
- [ Q Selenium: chromedriver executable needs to be in PATH? ](https://scrapfly.io/blog/answers/selenium-chromedriver-in-path)
- [ Q How to find HTML elements by class? ](https://scrapfly.io/blog/answers/how-to-find-html-elements-by-class)
- [ Q How to select HTML elements by text using CSS Selectors? ](https://scrapfly.io/blog/answers/how-to-select-elements-by-text-using-css-selectors)
 
  



   



 Scale your web scraping effortlessly, **1,000 free credits** [Start Free](https://scrapfly.io/register)