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 :has() selector Experimental
attribute axis Attribute selectors
child axis Child combinator
descendant axis Descendant combinator
following-sibling axis General sibling combinator or adjacent sibling combinator
self axis :scope or :host selector