CSS :nth-last-child(n) Selector with Example

The :nth-last-child(n) selector in CSS is a pseudo-class in CSS that allows you to select every element that is nth-child of its parent element, starting from the last child.

This selector matches elements based on their position from the end, rather than from the start of a parent element’s child list.

This is especially useful when you want to style elements in reverse order, such as the last few list items, or to dynamically style an element whose position might change.

For example, suppose you have a list of ten items. You want to style the third-last item differently, you can achieve this with :nth-last-child(3).

Syntax for nth-last-child(n) Selector in CSS

CSS :nth-last-child(n) selector selects one or more elements based on their position relative to the last child of their parent element. The general syntax to use nth-last-child(n) selector is as follows:

element:nth-last-child(n) {
    /* CSS styles here */
}

In this syntax, the element refers to the type of element you want to target, such as a <div>, <li>, <p>, etc. The :nth-last-child pseudo-class takes an argument n, which can be an integer number, a keyword, or a formula.

The argument n represents the index of the element that is counted from the last child (starting at 1 for the last child, 2 for the second-to-last, and so on).

Let’s take some basic examples based on the CSS :nth-last-child(n) selector.

Selecting Specific Elements

Let’s take an example in which we have a parent element with five child elements. We will only style the second-last child element in the list.

Example 1:

<!DOCTYPE html>
<html>
<head>
<style>
/* Selects the last 2nd item, starting from the last child.*/
p:nth-last-child(2) {
   color: red;
}
</style>
</head>
<body>
<div>
   <p>First child</p>
   <p>Second child</p>
   <p>Third child</p>
   <p>Fourth child</p>
   <p>Fifth child</p>
</div>
</body>
</html>

Output:

In this example, the p:nth-last-child(2) selector will apply the CSS style to the second-last child element (i.e. <p>Fourth child</p>) inside the parent div element. It will change the text color of the fourth paragraph to red.

Let’s take an example in which we will style last child element of its div parent.

Example 2:

<!DOCTYPE html>
<html>
<head>
<style>
/* Styling the last child. */
p:nth-last-child(1) {
  font-weight: bold;
  color: red;
}
</style>
</head>
<body>
<div>
   <p>First child</p>
   <p>Second child</p>
   <p>Third child</p>
   <p>Fourth child</p>
   <p>Fifth child</p>
</div>
</body>
</html>

In this example, the selector p:nth-last-child(1) will style the last child element of the its parent div element.

Styling Every Second Child from the Last

Let’s take an example in which we will write the CSS code to style every second child element from the last.

Example 3:

<!DOCTYPE html>
<html>
<head>
<style>
/* Styling every second child from the last. */
p:nth-last-child(even) {
   background-color: red;
   color: white;
}
</style>
</head>
<body>
<div>
   <p>First child</p>
   <p>Second child</p>
   <p>Third child</p>
   <p>Fourth child</p>
   <p>Fifth child</p>
</div>
</body>
</html>

Output:

Styling Every Third Child from the Last

Let’s write the CSS code to style every third child element from the last.

li:nth-last-child(3n) {
   color: blue;
}

This CSS code will color every third list item starting from the end in blue.

Using a Formula with :nth-last-child(n) in CSS

You can also use formulas like 2n+1 with CSS :nth-last-child selector to style alternating elements counting from the last child.

Example 3:

<!DOCTYPE html>
<html>
<head>
<style>
/* Styling alternating elements counting from the last child. */
li:nth-last-child(2n+1) {
   color: red;
}
</style>
</head>
<body>
<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
  <li>List Item 6</li>
  <li>List Item 7</li>
</ul>
</body>
</html>

Combining CSS :nth-last-child(n) with Pseudo-classes

You can combine :nth-last-child(n) with other pseudo-classes like :hover to create interactive elements. Look at the CSS code below:

Example 4:

p:nth-last-child(1):hover {
   color: orange;
}

This CSS code will change the color of the last paragraph to orange when hovered over the last paragraph element.