Skip to: content, navigation

by Tommy Olsson and Paul O’Brien

:nth-last-of-type(N) (CSS selector)

Browser support full matrix
IE7 FF2 Saf3 Op9.5+
None None None Full
Spec
Version
CSS3

Example

The following example selector will match the last three image elements that are children of the element whose id attribute value matches "gallery":

#gallery>img:nth-last-of-type(-n+3)
{
  ⋮ declarations
}

The following example selector matches the penultimate term in a definition list:

dt:nth-last-of-type(2) {
  ⋮ declarations
}

Try it yourself!View all demos

Description

This pseudo-class matches elements on the basis of their positions within a parent element’s list of child elements of the same type. This 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-of-type(N) will match elements that are followed by N-1 siblings with the same element name in the document tree.

Compatibility

IE5.5None
6.0None
7.0None
Firefox1.0None
1.5None
2.0None
Safari1.3None
2.0None
3.0None
Opera9.2None
9.5Full

This pseudo-class is currently supported only by Opera 9.5 and the Konqueror web browser.

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.

Related Products

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters