:nth-last-child

The :nth-last-child selector allows you select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling elements. It functions the same as :nth-child except it selects items starting at the bottom of the source order, not the top.

Suppose we have a list with an unknown number of items, and we wish to highlight the second-to-last item (in this exact example, the “Fourth Item”):

<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
  <li>Fourth Item</li>
  <li>Fifth Item</li>
</ul>

Rather than doing something like adding a class to the list item (e.g. .highlight) we can use :nth-last-child:

li {
  background: slategrey;
}
/* select the second-last item */
li:nth-last-child(2) {
  background: lightslategrey;
}

As you can see, :nth-last-child takes an argument: this can be a single integer, the keywords “even” or “odd”, or a formula. If an integer is specified only one element is selected – but the keywords or a formula will iterate through all the children of the parent element and select matching elements—similar to navigating items in an array in JavaScript. Keywords “even” and “odd” are straightforward (2, 4, 6 etc or 1, 3, 5 respectively). The formula is constructed using the syntax an+b, where:

• “a” is an integer value
• “n” is the literal letter “n”
• “+” is an operator and may be either “+” or “-”
• “b” is an integer and is required if an operator is included in the formula

It is important to note that this formula is an equation, and iterates through each sibling element, determining which will be selected. The “n” part of the formula, if included, represents a set of increasing positive integers (just like iterating through an array). In our above example, we selected every second element with the formula 2n, which worked because every time an element was checked, “n” increased by one (2×0, 2×1, 2×2, 2×3, etc). If an element’s order matches the result of the equation, it gets selected (2, 4, 6, etc). For a more in-depth explanation of the math involved, please read this article.

To illustrate further, here are some examples of valid :nth-last-of-type selectors:

<div class="one">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
  <ol>
    <li>Five</li>
    <li>Six</li>  
    <li>Seven</li>
    <li>Eight</li>
  </ol>
</div>

<div class="two">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
  <ol>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
  </ol>
</div>

<div class="three">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
  <ol>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
  </ol>
  <ul>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
  </ul>
</div>

body {
  padding: 1em 2em;
}

ul, ol {
  list-style: none;
  padding: 0;
}
li {
  text-align: center;
  line-height: 2;
  background: slategrey;
}
div {
  width: 12em;
  float: left;
  margin-right: 2em;
}
hr {
  clear: both;
  padding-top: 1em;
  border: 0;
  border-bottom: 1px solid grey;
}

.one li:nth-last-child(1) {
  background: lightsteelblue;
}

.two ol :nth-last-child(3) {
  background: lightsteelblue;
}

.three :nth-last-child(-n+2) :nth-last-child(1) {
  background: lightsteelblue;
}



div:before {
  font-family: monospace;
  white-space: nowrap;
  font-size: 12px;
}
div:after {
  font-style: italic;
}

.one:before {
  content: "li:nth-last-child(1)";
}
.one:after {
  content: "select <li> elements that are the last child of their parent";
}

.two:before {
  content: "ol :nth-last-child(3)";
}
.two:after {
  content: "select the third-from-last child element of an <ol>";
}

.three:before {
  content: ":nth-last-child(-n+2) :nth-last-child(-n+3)";
}
.three:after {
  content: "select the last <li> element inside the last two elements";
}

Points of Interest

• :nth-last-child iterates through elements starting from the bottom of the source order. The only difference between it and :nth-child is that the latter iterates through elements starting from the top of the source order.
• The :nth-last-child selector is very similar to :nth-last-of-type but with one critical difference: it is less specific. In our example above they would produce the same result because we are iterating over only li elements, but if we were iterating over a more complex group of siblings, :nth-last-child would try to match all siblings, not only siblings of the same element type. This reveals the power of :nth-last-child—it can select any sibling element in an arrangement, not only elements that are specified before the colon.

Related Properties

• nth-child
• nth-last-of-type
• nth-of-type
• first-of-type
• last-of-type

Browser Support

:nth-last-child was introduced in CSS Selectors Module 3, which means old versions of browsers do not support it. However, modern browser support is impeccable, and the new pseudo-selectors are widely used in production environments. If you require older browser support, either polyfill for IE, or use these selectors in non-critical ways á la progressive enhancement, which is recommended.