This cheat sheet provides a comprehensive overview of XPath and CSS selectors. It includes the most commonly used selectors and functions, along with examples to help you understand how they work.
This cheat sheet is available to download as a PDF file .
Sign up for 1000 free web scraping API credits and try these selectors for free.
How to copy an XPath selector from Chrome Dev Tools
- Open Chrome Dev Tools (press F12 key or right-click on the webpage and select "Inspect")
- Use the element selector tool to highlight the element you want to scrape
- Right-click the highlighted element in the Dev Tools panel
- Select "Copy" and then "Copy XPath"
- Paste the XPath expression into the code
Xpath and CSS cheat sheet
Node Selection
Node selection allows you to select nodes based on their element names or hierarchy.
| CSS | XPath | Description |
|---|---|---|
element | //element | Selects all element nodes in the document. |
/element | Selects the root element element. | |
parent element | //parent/element | Selects all element nodes that are children of a parent node. |
* | //* | Selects all elements in the document. |
Example:
To select all div elements in a document:
- CSS:
div - XPath:
//div
Position-based Selection
Position-based selection allows you to select elements based on their position within their parent or among their siblings.
| CSS | XPath | Description |
|---|---|---|
:first-of-type | [1] | Selects the first element of its type among its siblings. |
:nth-of-type(n) | [n] | Selects the nth element of its type among its siblings. |
:last-of-type | [last()] | Selects the last element of its type among its siblings. |
:first-child | //*[1] | Selects the first child element of its parent. |
:last-child | //*[last()] | Selects the last child element of its parent. |
Example:
To select the first p element:
- CSS:
p:first-of-type - XPath:
//p[1]
Attribute Selection
Attribute selection allows you to select elements based on the presence or value of their attributes.
| CSS | XPath | Description |
|---|---|---|
[attribute] | //*[@attribute] | Selects all elements with the specified attribute. |
//element[@attribute] | Selects all element nodes with the specified attribute. | |
[attribute="value"] | //*[@attribute="value"] | Selects all elements where the attribute is equal to "value". |
//element[@attribute="value"] | Selects all element nodes where the attribute is equal to "value". |
Example:
To select all elements with a class of example:
- CSS:
[class="example"] - XPath:
//*[@class="example"]
Attribute Value Matching
Attribute value matching allows you to select elements based on partial matches of attribute values.
| CSS | XPath | Description |
|---|---|---|
[attribute^="value"] | [starts-with(@attribute, "value")] | Selects elements where the attribute value starts with "value". |
[attribute$="value"] | [ends-with(@attribute, "value")] | Selects elements where the attribute value ends with "value". |
[attribute*="value"] | [contains(@attribute, "value")] | Selects elements where the attribute value contains "value". |
Example:
To select elements with a class that starts with btn:
- CSS:
[class^="btn"] - XPath:
[starts-with(@class, "btn")]
XPath Axes
Axes in XPath allow you to select nodes relative to the current node.
| Axis | XPath Example | Description |
|---|---|---|
ancestor | //div/ancestor::* | Selects all ancestors (parent, grandparent, etc.) of the current node. |
ancestor-or-self | //div/ancestor-or-self::* | Selects the current node and all of its ancestors. |
child | //div/child::* | Selects all children of the current node. |
descendant | //div/descendant::* | Selects all descendants (children, grandchildren, etc.) of the current node. |
descendant-or-self | //div/descendant-or-self::* | Selects the current node and all of its descendants. |
following | //div/following::* | Selects all nodes that appear after the current node in the document. |
following-sibling | //div/following-sibling::* | Selects all siblings that appear after the current node. |
parent | //div/parent::* | Selects the parent of the current node. |
preceding | //div/preceding::* | Selects all nodes that appear before the current node in the document. |
preceding-sibling | //div/preceding-sibling::* | Selects all siblings that appear before the current node. |
self | //div/self::* | Selects the current node. |
Example:
To select all children of a div element:
- XPath:
//div/child::*
XPath Operators & Functions
XPath includes various operators and functions to manipulate and evaluate node sets, strings, and more.
| Category | Syntax | Description |
|---|---|---|
| Comparison Operators | = != < > <= >= | Used for comparing values in predicates. |
| Logical Operators | and or not() | Combine or negate conditions in predicates. |
| Node Set Functions | count(node-set) | Returns the number of nodes in the node-set. |
position() | Returns the position of the current node in the context of the current node list. | |
| String Functions | contains(string1, string2) | Checks if string1 contains string2. |
starts-with(string1, string2) | Checks if string1 starts with string2. | |
ends-with(string1, string2) | Checks if string1 ends with string2. | |
substring(string, start, length) | Extracts a substring from string. | |
string-length(string) | Returns the length of string. | |
concat(string1, string2, ...) | Concatenates strings. |
Example:
To check if a string attribute contains the value example:
- XPath:
[contains(@attribute, "example")]
