CSS3 :nth-last-child() Selector

Example

Specify a background color for every p element that is the second child of its parent, counting from the last child:

p:nth-last-child(2)
{
background:#ff0000;
}

Try it yourself »

Definition and Usage

The :nth-last-child(n) selector matches every element that is the nth child, regardless of type, of its parent, counting from the last child.

n can be a number, a keyword, or a formula.

Tip: Look at the :nth-last-of-type() selector to select the element that is the nth child, of a specified type, of its parent, counting from the last child.


Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The :nth-last-child() selector is supported in all major browsers, except Internet Explorer.


Examples

Try it Yourself - Examples


Example 1

Odd and even are keywords that can be used to match child elements whose index is odd or even.

Here, we specify two different background colors for odd and even p elements, counting from the last child:

p:nth-last-child(odd)
{
background:#ff0000;
}
p:nth-last-child(even)
{
background:#0000ff;
}

Try it yourself »

Example 2

Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.

Here, we specify a background color for all p elements whose index is a multiple of 3, counting from the last child:

p:nth-child(3n+0)
{
background:#ff0000;
}

Try it yourself »