:nth-last-of-type CSS Pseudo Class

The :nth-last-of-type pseudo-class in CSS is a powerful structural selector that allows developers to target elements based on their position within a parent, counting from the end rather than the beginning. Unlike :nth-of-type, which starts counting from the first child element of a given type, :nth-last-of-type starts from the last child of a particular type and moves backward. This can be extremely useful when styling elements that occur near the end of a container, such as the last few items in a list, without adding extra classes or IDs to the HTML structure.

This pseudo-class takes a single argument, an an+b expression, which determines which elements are selected. For example, :nth-last-of-type(1) targets the very last element of that type, while :nth-last-of-type(2n) selects every second element from the end. The expression can also include keywords like odd or even, allowing for concise patterns. Combined with other pseudo-classes, :nth-last-of-type can create complex, responsive layouts without the need for extra markup.

One practical use of :nth-last-of-type is styling the last few rows in a table or the final items in a list. For example, you could highlight the last three li elements in a list to draw attention to newly added items, or target the last paragraph in an article for special formatting, such as a different color or font style. Since it specifically matches elements of a given type, it avoids unintended selections that might occur with more generic selectors.

Here is a simple example:

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

li:nth-last-of-type(2) {
  color: red;
  font-weight: bold;
}

In this case, the second-to-last li element ("Item 3") will be styled with red text and bold font. The pseudo-class can also be combined with other selectors to increase specificity, such as ul li:nth-last-of-type(odd), which targets odd-numbered elements counting backward.

Because :nth-last-of-type relies on element type and order rather than classes or IDs, it is ideal for dynamic content where elements may be added or removed, ensuring consistent styling without manual updates. This makes it particularly useful in components like grids, lists, and tables.