| Version |
|---|
| CSS3 |
| IE8 | FF3.5+ | SA3.1+ | OP9.5+ | CH2+ |
|---|---|---|---|---|
| None | Full | Full | Full | Full |
Syntax
Description
This pseudo-class matches elements on the basis of their positions within a parent element’s list of child elements. The pseudo-class accepts an argument, N, which can be a keyword, a number, or a number expression of the form an+b. For more information, see Understanding :nth-child Pseudo-class Expressions.
If
N is a number or a number expression,
:nth-last-child(N)
matches elements that are followed by
N-1 siblings in the document
tree.
This example selector will match the last four list items in any list, be it ordered or unordered:
li:nth-last-child(-n+4) {
⋮ declarations
}
This selector will match any paragraph that’s the last child element of its parent element:
p:nth-last-child(1) {
⋮ declarations
}
This is, of course, equivalent to the selector p:last-child.
Example
This example selector will match the last row of any table:
tr:nth-last-child(1) {
⋮ declarations
}
Compatibility
| Internet Explorer | Firefox | Safari | Opera | Chrome | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 8.0 | 1.0 | 1.5 | 2.0 | 3.0 | 3.5 | 1.3 | 2.0 | 3.1 | 4.0 | 9.2 | 9.5 | 10.0 | 2.0 |
| None | None | None | None | None | None | None | None | Full | None | None | Full | Full | None | Full | Full | Full |
This pesudo-class is currently not supported in Internet Explorer.
User-contributed notes
There are no comments yet.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.