Pros

CSS

• Faster
• Widely used

XPath

• More complex way to retrieve elements

Cons

CSS

• Can not retrieve some elements. e.g. get parent element by child

XPath

• Harder to use

Examples

CSS

#id

XPath

//*[@id="id"]

by id

CSS

element1>element2

XPath

element1/element2

path

CSS

.class

XPath

//*[contains(@class, "class")]

by class

CSS

not supported

XPath

//*[@key="input" and @value=123]

//*[@x=123 or @y=234]

logic on a element

CSS

.container .element>.header

XPath

//*[contains(@class, "container")]//*[contains(@class, "element")]/*[contains(@class, "header")]

path 2

CSS

not supported

XPath

//table/tr[td[1][.="text"] or td[2][.="other text"]]
 

//*[title="50"]/..

get parent by child

CSS

element[attr]

element:not[attr]

XPath

//element[boolean(@attr)]

//element[not(boolean(@attr))]

element has/not has attribute