CSS :nth-last-child Pseudo Class
The :nth-last-child() CSS pseudo-class is used for selecting and styling elements starting from the last element upwards. Learn how to use, see examples.
The :nth-last-child() pseudo-class matches elements based on their position among a group of siblings, counting from the last element backwards. It is the mirror image of :nth-child(): instead of counting from the start, it counts from the end.
This makes it the right tool whenever you care about an element's distance from the end of a list — for example, styling the last item, the last few items, or "every item except the last." Because the count starts at the bottom, the rule keeps working even when you add or remove items at the top of the list.
The argument inside the parentheses can be a single number, a keyword (odd / even), or an An+B formula.
Difference from :nth-child()
Both pseudo-classes count among siblings, but in opposite directions:
:nth-child(1)matches the first sibling.:nth-last-child(1)matches the last sibling (equivalent to:last-child).
So li:nth-last-child(2) always targets the second-to-last list item, no matter how many items come before it. Reach for :nth-last-child() when your styling is anchored to the end of the group rather than the beginning.
Note:
:nth-last-child()counts all sibling elements regardless of type. If you need to count only siblings of the same element type (counting from the end), use:nth-last-of-type()instead.
Keyword values
odd
Selects elements with odd index numbers (e.g., 1, 3, 5, 7, etc.).
even
Selects elements with even index numbers (e.g., 2, 4, 6, 8, etc.).
Functional notation
<An+B>
Selects elements whose numeric position (counted from the last sibling) matches the pattern An+B, evaluated for every non-negative integer value of n (0, 1, 2, …). The last element’s index is 1. A and B must be integers and can be negative: A defines the step (pattern length) and B defines the offset.
Some common formulas, with the counting direction in mind:
| Formula | Matches (counting from the end) |
|---|---|
2n | Every 2nd element (even) |
2n+1 | Every other element starting at the last (odd) |
3 | The 3rd-from-last element only |
n+3 | The 3rd-from-last element and everything before it |
-n+3 | The last 3 elements only |
Version
Syntax
CSS :nth-last-child syntax
selector:nth-last-child() {
css declarations;
}Example of the :nth-last-child() selector:
CSS :nth-last-child example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-child(1) {
background-color: #1c87c9;
color: #fff;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<p>Lorem ipsum is simply dummy text...</p>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Here p:nth-last-child(1) selects the paragraph that is the last child of its parent, so only the second paragraph gets the blue background.
Example of "odd" and "even" keywords:
CSS :nth-last-child code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-child(odd) {
background: #1c87c9;
color: #eee;
}
p:nth-last-child(even) {
background: #666;
color: #eee;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</body>
</html>Counting from the end, Paragraph 3 is at position 1 (odd), Paragraph 2 at position 2 (even), and Paragraph 1 at position 3 (odd). So Paragraphs 1 and 3 use the odd rule and Paragraph 2 uses the even rule.
Example of :nth-last-child() with the <table> tag:
Note: For tr to be selected, it must be a direct child of tbody or table.
CSS :nth-last-child code example with table tag
<!DOCTYPE html>
<html>
<head>
<style>
table {
border: 1px solid #8EBF41;
border-spacing: 10px;
font-family: sans-serif;
}
table tr {
background-color: #cccccc;
}
/* Selects the last three elements */
tr:nth-last-child(-n+3) {
background-color: #8EBF41;
}
table tr td {
padding: 10px;
}
/* Selects every element starting from the second to last item */
tr:nth-last-child(n+2) {
color: #ffffff;
}
/* Select only the last second element */
tr:nth-last-child(2) {
font-weight: 900;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<table>
<tbody>
<tr>
<td>First row</td>
</tr>
<tr>
<td>Second row</td>
</tr>
<tr>
<td>Third row</td>
</tr>
<tr>
<td>Fourth row</td>
</tr>
<tr>
<td>Fifth row</td>
</tr>
</tbody>
</table>
</body>
</html>Example of :nth-last-child() with the <li> tag:
CSS :nth-last-child code example with ul tag
<!DOCTYPE html>
<html>
<head>
<style>
/* Selects the last three list items */
li:nth-last-child(-n+3),
li:nth-last-child(-n+3) ~ li {
color: #8EBF41;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<ol>
<li>List Item One</li>
<li>List Item Two</li>
</ol>
<ol>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li>List Item Four</li>
<li>List Item Five</li>
<li>List Item Six</li>
</ol>
</body>
</html>Note that li:nth-last-child(-n+3) is combined with the general sibling selector (~ li) so that the last three list items are highlighted reliably across browsers. In the second list (six items), the last three — "Four", "Five", and "Six" — turn green.
Related selectors
:nth-child()— the same idea, but counting from the first sibling.:nth-of-type()— counts only siblings of the same element type, from the start.:nth-last-of-type()— counts same-type siblings from the end.:last-child— a shorthand equivalent to:nth-last-child(1).