The :nth-last-child()
CSS pseudo-class matches elements based on their position among a group of siblings, counting from the end.
/* Selects every fourth element
among any group of siblings,
counting backwards from the last one */
:nth-last-child(4n) {
color: lime;
}
Note: This pseudo-class is essentially the same as :nth-child
, except it counts items backwards from the end, not forwards from the beginning.
Syntax
The nth-last-child
pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end.
Keyword values
odd
- Represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc., counting from the end.
even
- Represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc., counting from the end.
Functional notation
<An+B>
- Represents elements whose numeric position in a series of siblings matches the pattern
An+B
, for every positive integer or zero value ofn
. The index of the first element, counting from the end, is1
. The valuesA
andB
must both be<integer>
s.
Formal syntax
:nth-last-child( <nth> [ of <complex-selector-list> ]? )where <nth> = <an-plus-b> | even | odd<complex-selector-list> = <complex-selector>#where <complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*where <compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!<combinator> = '>' | '+' | '~' | [ '||' ]where <type-selector> = <wq-name> | <ns-prefix>? '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where <wq-name> = <ns-prefix>? <ident-token><ns-prefix> = [ <ident-token> | '*' ]? | <id-selector> = <hash-token><class-selector> = '.' <ident-token><attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'where <attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='<attr-modifier> = i | s
Examples
Example selectors
tr:nth-last-child(odd)
ortr:nth-last-child(2n+1)
- Represents the odd rows of an HTML table: 1, 3, 5, etc., counting from the end.
tr:nth-last-child(even)
ortr:nth-last-child(2n)
- Represents the even rows of an HTML table: 2, 4, 6, etc., counting from the end.
:nth-last-child(7)
- Represents the seventh element, counting from the end.
:nth-last-child(5n)
- Represents elements 5, 10, 15, etc., counting from the end.
:nth-last-child(3n+4)
- Represents elements 4, 7, 10, 13, etc., counting from the end.
:nth-last-child(-n+3)
- Represents the last three elements among a group of siblings.
p:nth-last-child(n)
orp:nth-last-child(n+1)
- Represents every
<p>
element among a group of siblings. This is the same as a simplep
selector. (Sincen
starts at zero, while the last element begins at one,n
andn+1
will both select the same elements.) p:nth-last-child(1)
orp:nth-last-child(0n+1)
- Represents every
<p>
that is the first element among a group of siblings, counting from the end. This is the same as the:last-child
selector.
Table example
HTML
<table>
<tbody>
<tr>
<td>First line</td>
</tr>
<tr>
<td>Second line</td>
</tr>
<tr>
<td>Third line</td>
</tr>
<tr>
<td>Fourth line</td>
</tr>
<tr>
<td>Fifth line</td>
</tr>
</tbody>
</table>
CSS
table {
border: 1px solid blue;
}
/* Selects the last three elements */
tr:nth-last-child(-n+3) {
background-color: pink;
}
/* Selects every element starting from the second to last item */
tr:nth-last-child(n+2) {
color: blue;
}
/* Select only the last second element */
tr:nth-last-child(2) {
font-weight: 600;
}
Result
Quantity query
A quantity query styles elements depending on how many of them there are. In this example, list items turn red when there are at least three of them in a given list. This is accomplished by combining the capabilities of the nth-last-child
pseudo-class and the general sibling combinator.
HTML
<h4>A list of four items (styled):</h4>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ol>
<h4>A list of two items (unstyled):</h4>
<ol>
<li>One</li>
<li>Two</li>
</ol>
CSS
/* If there are at least three list items,
style them all */
li:nth-last-child(n+3),
li:nth-last-child(n+3) ~ li {
color: red;
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
Selectors Level 4The definition of ':nth-last-child' in that specification. | Working Draft | Matching elements are not required to have a parent. |
Selectors Level 3The definition of ':nth-last-child' in that specification. | Recommendation | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:nth-last-child()
|
Chrome
Full support 4 |
Edge
Full support 12 |
Firefox
Full support 3.5 |
IE
Full support 9 |
Opera
Full support 9 |
Safari
Full support 3.2 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 3.2 |
Samsung Internet Android
Full support 1.0 |
Matches elements with no parent | Chrome
Full support 57 |
Edge
Full support 79 |
Firefox
Full support 52 |
IE
No support No |
Opera
Full support 44 |
Safari
No support No |
WebView Android
Full support 57 |
Chrome Android
Full support 57 |
Firefox Android
Full support 52 |
Opera Android
Full support 43 |
Safari iOS
No support No |
Samsung Internet Android
Full support 7.0 |
of <selector> syntax
|
Chrome No support No No support No Notes' See bug 304163. |
Edge No support No No support No Notes' See bug 304163. |
Firefox No support No No support No Notes' See bug 854148. |
IE
No support No |
Opera
No support No |
Safari
Full support 9 |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android No support No No support No Notes' See bug 854148. |
Opera Android
No support No |
Safari iOS
Full support 9 |
Samsung Internet Android
No support No |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.'
- See implementation notes.
See also
:nth-last-child() by Mozilla Contributors is licensed under CC-BY-SA 2.5.