:nth-last-child CSS Pseudo Class

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The :nth-last-child pseudo-class in CSS is used to select one or more elements based on their position relative to the end of a parent element’s child list, rather than the beginning. Unlike :nth-child, which counts children from the start, :nth-last-child starts counting from the last child backward. This allows developers to apply styles to elements dynamically based on their reverse position in the DOM tree, which is particularly useful when the number of children is variable or unknown.

The syntax of :nth-last-child allows the use of either a number, a keyword like odd or even, or a formula of the form an+b. For example, :nth-last-child(1) selects the last child, :nth-last-child(2) selects the second-to-last child, and :nth-last-child(odd) selects every odd child counting from the end. Formulas such as 2n+1 can create recurring patterns, counting backward through the child elements.

One of the common applications of :nth-last-child is styling lists in reverse order. For instance, you might want to apply a special style to the last three items of an unordered list:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

ul li:nth-last-child(-n+3) {
  background-color: lightblue;
}

In this example, the last three <li> elements - “Item 3,” “Item 4,” and “Item 5” - will have a light blue background. The formula -n+3 selects the last three children of the <ul> element.

Another practical usage is when combined with pseudo-elements like ::before or ::after, which allows adding decorative content or numbering specifically to elements counting from the end. For example, you could highlight every second-to-last child of a table row:

table tr td:nth-last-child(2) {
  font-weight: bold;
}

This would make the second-to-last cell in each row bold, which is useful in layouts where the last few elements have special meaning.

Overall, :nth-last-child provides flexibility in targeting elements from the end, complementing other structural pseudo-classes such as :nth-child and :first-child. It can be combined with other selectors and pseudo-classes to achieve precise styling patterns without the need for extra classes or JavaScript.

Syntax

element:nth-last-child (odd | even | <number> | <expression>) {
  /* ... */
}

Values

oddAll odd item numbers.
evenAll even item numbers.
<number>The serial number of the child relative to its parent. Numbering starts with 1, this will be the first item in the list.
<expression>It is given in the form an ± b , where a and b are integers, and n is a counter that automatically takes the value 0, 1, 2 ...

If a is zero, then it is not written and the record is reduced to b. If b is zero, then it is also not specified and the expression is written in the form an. a and b can be negative numbers, in which case the plus sign changes to minus, for example: 5n-1.
By using negative values of a and b, some results can also turn out to be negative or equal to zero. However, elements are affected only by positive values due to the numbering of elements starting at 1.

Example

HTML

<ul class="item-list">

  <li>Item 1</li>

  <li>Item 2</li>

  <li>Item 3</li>

  <li>Item 4</li>

  <li>Item 5 (Second to last)</li>

  <li>Item 6 (The last child)</li>

</ul>

CSS

/* General styling for the list */

.item-list li {

  padding: 10px;

  border: 1px solid #ddd;

  margin-bottom: 5px;

  list-style: none;

  font-family: sans-serif;

}



/* Target the 2nd element counting from the end.

   In our HTML, this will be "Item 5".

*/

.item-list li:nth-last-child(2) {

  background-color: #ffd700;

  border-color: #daa520;

  font-weight: bold;

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS :nth-last-child pseudo class. Hover over a browser icon to see the version that first introduced support for this CSS psuedo class.