Apply CSS selectors
tip
For more details, refer to the JavaDoc documentation.
Selector syntax
A selector is a chain of simple selectors separated by combinators. Selectors are case-insensitive, including those against elements, attributes, and attribute values.
The universal selector * is implicit when no element selector is supplied, for example, *.header and .header are equivalent.
| Pattern | Matches | Example |
|---|---|---|
* | Any element. | * |
tag | Element with the given tag name. | div |
#id | Element with the attribute ID of id. | div#wrap, #logo |
.class | Element with the class name of class. | div.left, .result |
[attr] | Element with the attribute named attr (contains any value). | a[href], [title] |
[^attrPrefix] | Element with the attribute name starting with attrPrefix that is used to find elements with HTML5 datasets. | [^data-], div[^data-] |
[attr=val] | Element with the attribute named attr and the value equal to val. | img[width=500], a[rel=nofollow] |
[attr="val"] | Element with the attribute named attr and the value equal to val. | span[hello="Cleveland"][goodbye="Columbus"], a[rel="nofollow"] |
[attr^=valPrefix] | Element with the attribute named attr and the value starting with valPrefix. | a[href^=http:] |
[attr$=valSuffix] | Element with the attribute named attr and the value ending with valSuffix. | img[src$=.png] |
[attr*=valContaining] | Element with the attribute named attr and the value containing valContaining. | a[href*=/search/] |
[attr~=regex] | Element with the attribute named attr and the value matching the regular expression. |
note
*|Erefers to the element of type E in thensnamespace, for example,*|name finds <fb:name> elements.ns|Eis for the element of type E in thensnamespace, for example,fb|name finds <fb:name> elements.
You can combine the above-mentioned patterns in any order. For example, div.header[title] a.red-class.new-class is the link having two classes: red-class AND new-class.
Combinators
| Pattern | Matches | Example |
|---|---|---|
E F | F element descended from an E element. | div a, .logo h1 |
E > F | F direct child of E. | ol > li |
E + F | F element immediately preceded by the E sibling. | li + li, div.head + div |
E ~ F | F element preceded by the E sibling. | h1 ~ p |
E, F, G | All matching elements of E, F, or G. | a[href], div, h3 |
Pseudo selectors
| Pattern | Matches | Example |
|---|---|---|
:lt(n) | Element with the sibling index less than n. | td:lt(3) finds the first three cells of each row. |
:gt(n) | Element with the sibling index greater than n. | td:gt(1) finds cells after skipping the first two. |
:eq(n) | Element with the sibling index equal to n. | td:eq(0) finds the first cell of each row. |
:has(selector) | Element that contains at least one element matching the selector. | div:has(p) finds divs that contain P elements. |
:not(selector) | Element that does not match the selector. See also Elements.not(String). |
|
:contains(text) | Element that contains the specified text. The search is case-insensitive. The text can appear in the found element or any of its descendants. | p:contains(jsoup) finds P elements containing the text jsoup. |
:matches(regex) | Element with the text matching the specified regular expression. The text can appear in the found element or any of its descendants. |
|
:containsOwn(text) | Element that directly contains the specified text. The search is case-insensitive. The text must appear in the found element, not any of its descendants. | p:containsOwn(jsoup) finds P elements with own text jsoup. |
:matchesOwn(regex) | Element with own text matching the specified regular expression. The text must appear in the found element, not any of its descendants. |
|
:containsData(data) | Element that contains the specified data. The content of the script, style elements, comment nodes, and so on are considered data nodes, not text nodes. The search is case-insensitive. The data can appear in the found element or any of its descendants. You can combine the above-mentioned patterns in any order and with other selectors. For example, .light:contains(name):eq(0). | script:contains(jsoup) finds script elements containing the data jsoup. |
:matchText | Treats text nodes as elements and allows to match against and select text nodes. The selector modifies the DOM, thus it is recommended to clone your document before using it. | p:matchText:firstChild with input One Two returns one PseudoTextElement with the text One. |
Structural pseudo selectors
| Pattern | Matches | Example |
|---|---|---|
:root | Root element of the document. In HTML, this is the HTML element. | :root |
:nth-child(an+b) | Element that has an+b-1 siblings before it in the document tree for any positive integer or zero value of n and has a parent element. For values of a and b greater than zero, this effectively divides the element's children into groups of elements (the last group taking the remainder) and selects the bth element of each group. For example, this allows the selectors to address every other row in a table, and could be used to alternate the color of a paragraph text in a cycle of four. The a and b values must be integers (positive, negative, or zero). The index of the first child of an element is 1. Mind that :nth-child() can take odd and even as arguments instead: odd has the same signification as 2n+1, and even has the same signification as 2n. |
|
:nth-last-child(an+b) | Element having an+b-1 siblings after it in the document tree. Otherwise, like :nth-child(). | tr:nth-last-child(-n+2) the last two rows of a table. |
:nth-of-type(an+b) | A pseudo-class notation representing the element that has an+b-1 siblings with the same expanded element name before it in the document tree for any zero or positive integer value of n and has a parent element. | img:nth-of-type(2n+1) |
:nth-last-of-type(an+b) | A pseudo-class notation representing an element that has an+b-1 siblings with the same expanded element name after it in the document tree for any zero or positive integer value of n and has a parent element. | img:nth-last-of-type(2n+1) |
:first-child | Element that is the first child of some other element. | div > p:first-child |
:last-child | Element that is the last child of some other element. | ol > li:last-child |
:first-of-type | Element that is the first sibling of its type in the list of children of its parent element. | dl dt:first-of-type |
:last-of-type | Element that is the last sibling of its type in the list of children of its parent element. | tr > td:last-of-type |
:only-child | Element that has a parent element that doesn't have any other element children. | |
:only-of-type | Element that has a parent element that doesn't have any other element children with the same expanded element name. | |
:empty | Element that has no children at all. |
XPath and CSS equivalents
| XPath | CSS |
|---|---|
//*[@disabled] | :disabled |
//*[@checked] | :checked |
//*[@selected] | :selected |
//*[@type="text"] | :text |
//*[contains(text(),"you")] | :contains("you") |
//p[contains(@me,"you")] | p[me*="you"] |
//p[starts-with(@me,"you")] | p[me^="you"] |
//p[substring(@me,string-length(@me)-2)="you"] | p[me$="you"] |
//p[contains(concat(" ",@me, " ")," you ")] | p[me~="you"] |
//p[@me!="you"] | p[me!="you"] |
//p[@id="me"] | p#me |
//p[not(@id="me")] | p:not(#me) |
//p[contains(concat(" ", @class, " "), " me ")] | p.me |
//div//p | div p |
//div/p | div > p |
//h1/following-sibling::div | h1 + div |
//h1/following-sibling::*[count(div)] | h1 ~ div |
/*[1] | :root |
descendant::*[1] | :first-child |
//*[last()] | :last-child |
//*[count(*)=1] | :only-child |
//*[count(*) = 0] | :empty |
//*[position() mod n = 1] | :nth-child(n) |
//*[(position() mod 2)=1] | :nth-child(odd) |
//*[(position() mod 2)=0] | :nth-child(even) |
//*[(count() - position()) mod n = 1] | :nth-last-child(n) |
//p[n] | :nth-of-type(n) |
//p[(count() - position()) mod n = 1] | :nth-last-of-type(n) |
descendant::p[1] | :first-of-type |
//p[last()] | :last-of-type |
//p[count(*)=1] | :only-of-type |