Abakada: Back to Basics > Language References > CSS Properties > Pseudo-Classes > nth-last-child( ) Pseudo-class

---

Selects child elements according to their position among sibling elements, counting from the end.

:nth-last-child( index | odd | even | An+B ) {
   property: value;
}

index	Non-negative integer. Matches any element that is the nth child of its parent, counting from the end.
odd	Matches elements whose nth position in a set of siblings is odd: 1, 3, 5, etc., counting from the end.
even	Matches elements whose nth position in a set of siblings is even: 2, 4, 6, etc., counting from the end.
An+B	formula where A is an integer step size, B is an integer offset, and n is all non negative integers, starting from 0, counting from the end.
property	Any valid CSS property.
value	Any of the range of values available to the corresponding property.

The :nth-last-child( ) pseudo-class applies styles to child elements according to their position among sibling elements within a parent element, counting from the end.

The syntax variations for using the :nth-last-child( ) pseudo-class is given below.

For example, to match :nth-last-child elements at the given index, counting from the end.

/* Selects every third element among any group of siblings, counting from the end */
:nth-last-child(3) {
   background-color: wheat;
}

/* Selects every third element of <div> siblings, counting from the end */
div:nth-last-child(3) {
   background-color: beige;
}

/* Selects every third element of list items, counting from the end */
li:nth-last-child(3) {
   background-color: bisque;
}

To match odd or even child elements of a selector, counting from the end.

div:nth-last-child(odd) { background-color: beige }

div:nth-last-child(even) { background: bisque }

To match every element in steps or multiples of 3 ( 3rd, 6th, 9th, etc. ), counting from the end.

:nth-last-child(3n)

To match every element from the given offset onwards ( 3rd, 4th, 5th, etc. ), counting from the end.

:nth-last-child(n+3)

To match every element in steps or multiples of 3 plus from the given offset ( 2nd, 5th, 8th, etc. ), counting from the end.

:nth-last-child(3n+2)

The following demonstrates use of the :nth-last-child( ) pseudo-class in an embedded stylesheet to set the style of nth-last-child elements on a page.

• 14.3.2. :nth-last-child() pseudo-class

:firstChild( )   :last-child( )   :nth-child( )   :only-child( )