Skip to: content, navigation

by Tommy Olsson and Paul O’Brien

:nth-last-child(N) (CSS selector)

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

Example

This example selector will match the last row of any table:

tr:nth-last-child(1) {
  ⋮ 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. 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.

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