The :nth-last-of-type()
CSS pseudo-class matches one or more elements of a given type, based on their position among a group of siblings, counting from the end.
/* Selects every fourth <p> element among any group of siblings, counting backwards from the last one */ p:nth-last-of-type(4n) { color: lime; }
Note: This pseudo-class is essentially the same as :nth-of-type
, except it counts items backwards from the end, not forwards from the beginning.
Syntax
The nth-last-of-type
pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end.
See :nth-last-child
for a more detailed explanation of its syntax.
Formal syntax
:nth-last-of-type( <nth> )
Example
HTML
<div> <span>This is a span.</span> <span>This is another span.</span> <em>This is emphasized.</em> <span>Wow, this span gets limed!!!</span> <strike>This is struck through.</strike> <span>Here is one last span.</span> </div>
CSS
span:nth-last-of-type(2) { background-color: lime; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
Selectors Level 4 The definition of ':nth-last-of-type' in that specification. |
Working Draft | Matching elements are not required to have a parent. |
Selectors Level 3 The definition of ':nth-last-of-type' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 4.0 | (Yes) | 3.5 (1.9.1) | 9.0 | 9.5 | 3.2 |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 2.1 | (Yes) | 1.0 (1.9.1) | 9.0 | 10.0 | 3.2 |
See also
Document Tags and Contributors
Tags:
Contributors to this page:
mfluehr,
chrisdavidmills,
PyroLagus,
erikadoyle,
Sebastianz,
MusikAnimal,
Novocaine88,
kscarfone,
Sheppy,
joyously,
teoli,
McGurk
Last updated by:
mfluehr,