CSS Selectors vs XPath

diagram CSS selectors and XPath overlap, and then diverge mermaid

  flowchart LR
  subgraph "both do this"
    A["by tag, class, id"]
    B["descendant and child"]
    C["attribute equals / contains"]
    D["nth child"]
  end
  subgraph "only XPath"
    E["match on text content"]
    F["walk UP to a parent"]
    G["preceding sibling"]
    H["arbitrary boolean logic"]
  end
  A --> I["prefer CSS -- shorter, and the same syntax as your stylesheets"]
  E --> J["prefer XPath -- 'the row whose label says Total'"]
  F --> J

For everyday selection they do the same job and CSS is shorter. XPath earns its verbosity in two places CSS cannot reach: matching on the text a node contains, and walking back up to a parent or an earlier sibling. If a selector needs either of those, that is the moment to switch.

CSS selectors

Great for:

• BeautifulSoup (select, select_one)
• Playwright
• browser devtools

Examples:

• .price
• div.card a
• #main h2.title

XPath

Great for:

• lxml
• Selenium (via XPath)
• complex DOM relationships

Examples:

• //div[@class='card']//a
• //table//tr[1]/td[2]

Quick comparison

• CSS is usually simpler
• XPath is more powerful for “go to parent/sibling” cases