DEVHINTS.

IO Edit

Your new development career

awaits. Check out the latest listings.

Xpath cheatsheet ads via Carbon

Xpath test bed Browser console

Test queries in the Xpath test bed: $x("//div")

Xpath test bed Works in Firefox and Chrome.

(whitebeam.org)

# Selectors
Descendant selectors Attribute selectors

h1 //h1 ? #id //*[@id="id"] ?

div p //div//p ? .class //*[@class="class"] …kinda

ul > li //ul/li ? input[type="submit"] //input[@type="submit"]

ul > li > a //ul/li/a a#abc[for="xyz"] //a[@id="abc"][@for="xyz"] ?

div > * //div/* a[rel] //a[@rel]

:root / ? a[href^='/'] //a[starts-with(@href, '/')] ?

:root > body /body a[href$='pdf'] //a[ends-with(@href, '.pdf')]

 Order things
Other selectors Class
Siblings
jQuerycheck
a[href*='://'] //a[contains(@href, '://')]

a[rel~='help'] //a[contains(@rel, 'help')] …kinda

ul > li:first-of-type
h1:not([id]) //ul/li[1]
//h1[not(@id)] ? h1
$('ul
~ ul
> li').parent()
//div[contains(concat(' //h1/following-sibling::ul
//ul/li/..
',normalize-space(@class),' '),' foobar ')] ?

ul >match
Text li:nth-of-type(2) //ul/li[2]
//button[text()="Submit"] ? $('li').closest('section')
h1 + ul //h1/following-sibling::ul[1]
//li/ancestor-or-self::section
Xpath doesn’t have the “check if part of space-separated list” operator, so this is the
ul >match
Text (substring)
li:last-of-type //ul/li[last()]
//button[contains(text(),"Go")] h1 ~ #id (source).
workaround
$('a').attr('href') //h1/following-sibling::[@id="id"]
//a/@href ?

Arithmetic
li#id:first-of-type //li[1][@id="id"]> 2.50]
//product[@price ? $('span').text() //span/text()

Has children
a:first-child //*[1][name()="a"]
//ul[*]

Has children (specific)

a:last-child //*[last()][name()="a"]
//ul[li]

Or logic //a[@name or @href] ?

Union (joins results) //a | //div ?

# Expressions
Steps and axes Prefixes
 Axes
// ul / a[@id='link'] Prefix
Steps Example What

Axis Step Axis Step // //hr[@class='edge'] Anywhere

Axis Example What //div
//div[@name='box']
./ ./a Relative
/ //ul/li/a Child //[@id='link']
/ /html/body/div Root
// //[@id="list"]//a Descendant
A step may have an element name (div) and predicates ([...]). Both are optional. They
Begin your expression with any of these.
Separate your steps with /. Use two (//) if you don’t want to select direct children. can also be these other things:

//a/text() #=> "Go home"

//a/@href #=> "index.html"
//a/* #=> All a's child elements

# Predicates
Predicates Operators

//div[true()] # Comparison
//div[@class="head"] //a[@id = "xyz"]
//div[@class="head"][@id="top"] //a[@id != "xyz"]
//a[@price > 25]
 Using
Chaining
nodes
Restricts a order
nodeset only if some condition is true. They can be chained. Indexing
Nesting
# Logicpredicates
(and/or)
//div[@id="head" and position()=2]
//div[(x and y) or not(z)]
# Use them inside functions
a[1][@href='/'] //a[1]
//section[.//h1[@id='hi']]
# first <a>
//ul[count(li) > 2]
a[@href='/'][1] //a[last()] # last <a>
//ul[count(li[@class='hide']) > 0] Use comparison and logic operators
//ol/li[2] to make
# second <li>conditionals.
This returns <section> if it has
//ol/li[position()=2] # an asdescendant
<h1>
same above with id='hi'.
Order is significant, these two are different. //ol/li[position()>1] # :not(:first-of-type)
# This returns `<ul>` that has a `<li>` child
//ul[li]
Use [] with a number, or last() or position().

You can use nodes inside predicates.

# Functions
Node functions Boolean functions

name() # //[starts-with(name(), 'h')] not(expr) # button[not(starts-with(text(),"Submit"))]

text() # //button[text()="Submit"]
# //button/text()
lang(str)
String functions
 namespace-uri()
Type conversion contains() # font[contains(@class,"head")]
starts-with() # font[starts-with(@class,"head")]
count() # //table[count(tr)=1] ends-with() # font[ends-with(@class,"head")]
string()
position() # //ol/li[position()=2]
number()
boolean() concat(x,y)
substring(str, start, len)
substring-before("01/02", "/") #=> 01
substring-after("01/02", "/") #=> 02
translate()
normalize-space()
string-length()

# Axes
Using axes Child axis

//ul/li # ul > li # both the same

//ul/child::li # ul > li (same) //ul/li/a
//ul/following-sibling::li # ul ~ li //child::ul/child::li/child::a
//ul/descendant-or-self::li # ul li
//ul/ancestor-or-self::li # $('ul').closest('li')
child:: is the default axis. This makes //a/b/c work.

Steps of an expression are separated by /, usually used to pick child nodes. That’s not
# both the same
always true: you can specify a different “axis” with ::.
# this works because `child::li` is truthy, so the predicate succeeds
//ul[li]
// ul /child:: li //ul[child::li]

Axis Step Axis Step

# both the same
//ul[count(li) > 2]

Descendant-or-self axis //ul[count(child::li) > 2]

# both the same

Other axes
 //div//h4
Unions Axis Abbrev Notes
//div/descendant-or-self::h4

ancestor
//a
// is |short
//span
for the descendant-or-self:: axis.
ancestor-or-self

Use | to the
# both join two expressions.
same attribute @ @href is short for attribute::href
//ul//[last()]
//ul/descendant-or-self::[last()] child div is short for child::div

descendant

descendant-or-self // // is short for /descendant-or-self::node()/

namespace

self . . is short for self::node()

parent .. .. is short for parent::node()

following

following-sibling

preceding

preceding-sibling

There are other axes you can use.

# More examples
Examples Find a parent

//* # all elements

 count(//*) # count all elements
Closest
(//h1)[1]/text() # text of the first h1 heading Attributes
//section[h1[@id='section-name']]
//li[span] # find a <li> with an <span> inside it
# ...expands to //li[child::span]
./ancestor-or-self::[@class="box"] Finds a <section>
//item[@price > that directly contains h1#section-name
2*@discount]
//ul/li/.. # use .. to select a parent

Works like jQuery’s $().closest('.box'). Finds <item> and check its attributes
//section[//h1[@id='section-name']]

Finds a <section> that contains h1#section-name. (Same as above, but uses

descendant-or-self instead of child)

# References
Xpath test bed (whitebeam.org)

▸ 0 Comments for this cheatsheet. Write yours!

devhints.io / Search 358+ cheatsheets

 Other HTML cheatsheets Top cheatsheets

Input tag HTML meta tags Elixir ES2015+

cheatsheet cheatsheet cheatsheet cheatsheet

Over 358 curated cheatsheets, by

developers for developers. Layout thrashing Appcache React.js Vimdiff
cheatsheet cheatsheet cheatsheet cheatsheet

Devhints home
Applinks HTML emails Vim Vim scripting
cheatsheet cheatsheet cheatsheet cheatsheet