1. Technology
Send to a Friend via Email



nth-last-of-type Description:

The :nth-last-of-type pseudo-class matches elements based on their position within the parent element's list of child elements of the same type. It matches elements counting up from the bottom of the parent element.

This pseudo-class accepts an argument (N) which can be a number, keyword, or expression. To learn more about how to define :nth-last-of-type expressions, see my article How to Use nth-child(N) Expressions.

nth-last-of-type in CSS Versions:

nth-last-of-type Syntax:

:nth-last-of-type(N) { }
N can be:

  • number - Any integer (1, 2, 10, etc.). This will match the child in that exact position counting up from the bottom of the parent element
  • expression An algebraic expression of the form an+b to allow you to match on more complex combinations
  • odd - Matches every other child, starting with the last one of that type
  • even - Matches every other child, starting with the second to last one of that type

nth-last-of-type Browser Support:

This pseudo-class is expected to be supported in Internet Explorer 9.

nth-last-of-type Examples:

Select the third paragraph element from the bottom in the body content:

p:nth-last-of-type(3) { }

Select the even rows of a table:

tr:nth-last-of-type(even) { }

Select every fourth paragraph from the bottom:

p:nth-last-of-type(4n) { }

Select every third image starting with the last:

img:nth-last-of-type(3n-2) { }

See some nth-last-of-type examples in action.

nth-last-of-type Special Notes:

This selector is primarily useful for selecting specific child elements at the bottom of a parent element.

If you leave off the (N) value in your :nth-last-of-type(N) selector, most browsers will simply ignore the selector.

More Information on the nth-last-of-type CSS Property

More help with CSS 3
Return to the Style Library

©2014 About.com. All rights reserved.