Added docs on remaining pseudo classes.

This commit is contained in:
Yorick Peterse 2014-11-15 21:20:53 +01:00
parent 02e00019ff
commit 181a0c3bc8
1 changed files with 141 additions and 19 deletions

View File

@ -397,8 +397,8 @@ For `:root` the XPath expression is:
### :nth-child(n) ### :nth-child(n)
The `:nth-child(n)` selector can be used to select a set of elements based on The `:nth-child(n)` pseudo class can be used to select a set of elements based
their position or an interval, skipping elements that occur in a set before on their position or an interval, skipping elements that occur in a set before
the given position or interval. the given position or interval.
In the form `:nth-child(n)` the identifier `n` is an argument that can be used In the form `:nth-child(n)` the identifier `n` is an argument that can be used
@ -544,9 +544,9 @@ expressions are as following:
### :nth-last-child(n) ### :nth-last-child(n)
The `:nth-last-child(n)` selector can be used to select a set of elements based The `:nth-last-child(n)` pseudo class can be used to select a set of elements
on their position or an interval, skipping elements that occur in a set after based on their position or an interval, skipping elements that occur in a set
the given position or interval. after the given position or interval.
The arguments that can be used by this selector are the same as those mentioned The arguments that can be used by this selector are the same as those mentioned
in [:nth-child(n)][nth-childn]. in [:nth-child(n)][nth-childn].
@ -605,9 +605,10 @@ The corresponding XPath expressions are similar to those used for
### :nth-of-type(n) ### :nth-of-type(n)
The `:nth-of-type(n)` selector can be used to select a set of elements that has The `:nth-of-type(n)` pseudo class can be used to select a set of elements that
a set of preceding siblings with the same name. The arguments that can be used has a set of preceding siblings with the same name. The arguments that can be
by this selector are the same as those mentioned in [:nth-child(n)][nth-childn]. used by this selector are the same as those mentioned in
[:nth-child(n)][nth-childn].
The matching order of this selector is the same as [:nth-child(n)][nth-childn]. The matching order of this selector is the same as [:nth-child(n)][nth-childn].
@ -624,8 +625,8 @@ Example XML:
Using the CSS expression `root foo:nth-of-type(even)` would return a set Using the CSS expression `root foo:nth-of-type(even)` would return a set
containing the 2nd and 4th `<foo>` nodes. containing the 2nd and 4th `<foo>` nodes.
The corresponding XPath expressions for the various forms of this selector are The corresponding XPath expressions for the various forms of this pseudo class
as following: are as following:
:nth-of-type(n) => *[position() = n] :nth-of-type(n) => *[position() = n]
:nth-of-type(-n) => *[position() = -n] :nth-of-type(-n) => *[position() = -n]
@ -640,7 +641,7 @@ as following:
### :nth-last-of-type(n) ### :nth-last-of-type(n)
The `:nth-last-of-type(n)` selector behaves the same as The `:nth-last-of-type(n)` pseudo class behaves the same as
[:nth-of-type(n)][nth-last-of-typen] excepts it matches nodes in reverse order [:nth-of-type(n)][nth-last-of-typen] excepts it matches nodes in reverse order
similar to [:nth-last-child(n)][nth-last-childn]. To clarify, this means similar to [:nth-last-child(n)][nth-last-childn]. To clarify, this means
matching occurs as following: matching occurs as following:
@ -666,8 +667,8 @@ Example XML:
Using the CSS expression `root foo:nth-of-type(even)` would return a set Using the CSS expression `root foo:nth-of-type(even)` would return a set
containing the 1st and 3rd `<foo>` nodes. containing the 1st and 3rd `<foo>` nodes.
The corresponding XPath expressions for the various forms of this selector are The corresponding XPath expressions for the various forms of this pseudo class
as following: are as following:
:nth-last-of-type(n) => *[position() = last() - -1] :nth-last-of-type(n) => *[position() = last() - -1]
:nth-last-of-type(-n) => *[position() = last() - -1] :nth-last-of-type(-n) => *[position() = last() - -1]
@ -682,8 +683,8 @@ as following:
### :first-child ### :first-child
The `:first-child` selector can be used to match a node that is the first child The `:first-child` pseudo class can be used to match a node that is the first
node of another node (= a node without any preceding nodes). child node of another node (= a node without any preceding nodes).
Example XML: Example XML:
@ -695,14 +696,14 @@ Example XML:
Using the CSS selector `root :first-child` would return a set containing only Using the CSS selector `root :first-child` would return a set containing only
the `<foo>` node. the `<foo>` node.
The corresponding XPath expression for this selector is as following: The corresponding XPath expression for this pseudo class is as following:
:first-child => *[count(preceding-sibling::*) = 0] :first-child => *[count(preceding-sibling::*) = 0]
### :last-child ### :last-child
The `:last-child` selector can be used to match a node that is the last child The `:last-child` pseudo class can be used to match a node that is the last
node of another node (= a node without any following nodes). child node of another node (= a node without any following nodes).
Example XML: Example XML:
@ -714,10 +715,128 @@ Example XML:
Using the CSS selector `root :last-child` would return a set containing only Using the CSS selector `root :last-child` would return a set containing only
the `<bar>` node. the `<bar>` node.
The corresponding XPath expression for this selector is as following: The corresponding XPath expression for this pseudo class is as following:
:last-child => *[count(following-sibling::*) = 0] :last-child => *[count(following-sibling::*) = 0]
### :first-of-type
The `:first-of-type` pseudo class matches elements that are the first sibling of
its type in the list of elements of its parent element. This selector is the
same as [:nth-of-type(1)][nth-of-typen].
Example XML:
<root>
<a id="1" />
<a id="2">
<a id="3" />
<a id="4" />
</a>
</root>
Using the CSS selector `root a:first-of-type` would return a node set containing
nodes `<a id="1">` and `<a id="3">` as both nodes are the first siblings of
their type.
The corresponding XPath for this pseudo class is as following:
a:first-of-type => a[count(preceding-sibling::a) = 0]
An alternative way is to use the following XPath:
a:first-of-type => //a[position() = 1]
This however relies on the less efficient `descendant-or-self::node()` selector.
For querying larger documents it's recommended to use the first form instead.
### :last-of-type
The `:last-of-type` pseudo class can be used to match elements that are the last
sibling of its type in the list of elements of its parent. This selector is the
same as [:nth-last-of-type(1)][nth-last-of-typen].
Example XML:
<root>
<a id="1" />
<a id="2">
<a id="3" />
<a id="4" />
</a>
</root>
Using the CSS selector `root a:last-of-type` would return a set containing nodes
`<a id="2">` and `<a id="4">` as both nodes are the last siblings of their type.
The corresponding XPath for this pseudo class is as following:
a:last-of-type => a[count(following-sibling::a) = 0]
Similar to [:first-of-type][first-of-typen] this XPath can alternatively be
written as following:
a:last-of-type => //a[position() = last()]
### :only-child
The `:only-child` pseudo class can be used to match elements that are the only
child element of its parent.
Example XML:
<root>
<a id="1" />
<a id="2">
<a id="3" />
</a>
</root>
Using the CSS selector `root a:only-child` would return a set containing only
the `<a id="3">` node.
The corresponding XPath for this pseudo class is as following:
a:only-child => a[count(preceding-sibling::*) = 0 and count(following-sibling::*) = 0]
### :only-of-type
The `:only-of-type` pseudo class can be used to match elements that are the only
child elements of its type of its parent.
Example XML:
<root>
<a id="1" />
<a id="2">
<a id="3" />
<b id="4" />
</a>
</root>
Using the CSS selector `root a:only-of-type` would return a set containing
only the `<a id="3">` node due to it being the only `<a>` node in the list of
elements of its parent.
The corresponding XPath for this pseudo class is as following:
a:only-child => a[count(preceding-sibling::a) = 0 and count(following-sibling::a) = 0]
### :empty
The `:empty` pseudo class can be used to match elements that have no child nodes
at all.
Example XML:
<root>
<a />
<b>10</b>
</root>
Using the CSS selector `root :empty` would return a set containing only the
`<a>` node.
[w3spec]: http://www.w3.org/TR/css3-selectors/ [w3spec]: http://www.w3.org/TR/css3-selectors/
[rfc-2119]: https://www.ietf.org/rfc/rfc2119.txt [rfc-2119]: https://www.ietf.org/rfc/rfc2119.txt
[kramdown]: http://kramdown.gettalong.org/ [kramdown]: http://kramdown.gettalong.org/
@ -726,3 +845,6 @@ The corresponding XPath expression for this selector is as following:
[nth-childn]: #nth-childn [nth-childn]: #nth-childn
[nth-last-childn]: #nth-last-childn [nth-last-childn]: #nth-last-childn
[nth-last-of-typen]: #nth-last-of-typen [nth-last-of-typen]: #nth-last-of-typen
[nth-of-typen]: #nth-of-type
[nth-last-of-typen]: #nth-last-of-typen
[first-of-typen]: #first-of-typen