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 4 The definition of ':nth-last-child' in that specification. |
Working Draft | Matching elements are not required to have a parent. |
Selectors Level 3 The definition of ':nth-last-child' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
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
| Edge
No support
No
| Firefox
No support
No
| 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
| 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.