Comparison of CSS Selectors and XPath
This article seeks to document the difference between CSS Selectors and XPath for web developers to be able to better choose the right tool for the right job.
| XPath feature | CSS equivalent |
|---|---|
ancestor, parent or preceding-sibling axis |
{{CSSxRef(":has",":has()")}} selector |
attribute axis |
Attribute selectors |
child axis |
Child combinator |
descendant axis |
Descendant combinator |
following-sibling axis |
Subsequent-sibling combinator or Next-sibling combinator |
self axis |
{{CSSxRef(":scope")}} or {{CSSxRef(":host")}} selector |