The :nth-last-child() pseudo-class matches elements by their 1-based index among siblings, counting from the end. Position 1 is the last child; 2 is second-to-last.
Same patterns as :nth-child() (odd, even, An+B) — only the direction flips. Example: li:nth-last-child(-n+3) styles the last three items.
Core patterns are long-supported. The newer of <selector> form has narrower historical support — treat it as progressive when you need filtered counting from the end.
:nth-last-child( <An+B> | even | odd)Optional filter: :nth-last-child(even of .noted). Examples: :nth-last-child(1), :nth-last-child(2n), :nth-last-child(-n+3).
Pass one pattern; indices are counted from the last sibling:
| Pattern | Matches (from end) | Try it |
|---|---|---|
1 / :last-child | Only the last child | Try it |
-n+3 | Last three children | Try it |
odd / 2n+1 | 1st, 3rd, 5th… from the end | Try it |
2 | Second-to-last only | Try it |
even / n+2 | Even from end / all but the last |
:nth-last-child()Count from the end of the sibling list, then style matching positions.
ul, tbody, …).li:nth-last-child(pattern).| Piece | Required? | Role |
|---|---|---|
| Shared parent | Yes | Siblings share one child list |
| Pattern | Yes | odd, even, number, or An+B from the end |
| Element type | Usually | Must also match (e.g. li) at that reverse index |
of filter | Optional | Count only among a filtered subset from the end |
Change the pattern. Highlighted items match li:nth-last-child(…) (count from the bottom).
Short reverse-count patterns. Use Try It Yourself for a live editor.
-n+3)Highlight the last three siblings.
<style>
li:nth-last-child(-n+3) {
background: #dbeafe;
}
</style>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>-n+3 for n = 0,1,2 yields 3, 2, 1 — the last three.Style only the sibling just before the last.
<style>
li:nth-last-child(2) {
color: #b91c1c;
font-weight: 700;
}
</style>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>2 matches C — second-to-last.1 would match D — same as :last-child.Zebra-style stripes counted from the last item.
<style>
li:nth-last-child(odd) {
background: #fef3c7;
}
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>:nth-child(odd) when the total count is even or odd — compare both.2n+1 counted from the end.Direction is the main difference from :nth-child() — formulas look the same.
-n+3 means “first three” with :nth-child() and “last three” with :nth-last-child().
Other tags occupy reverse indices too. Prefer :nth-last-of-type() for same-tag counting from the end.
of filters the reverse list:nth-last-child(2 of .noted) is the 2nd-from-last .noted — not “second-to-last child if it has .noted.” Test support when you need it.
li:nth-last-child(n+3) (and related sibling patterns) can style lists only when they contain enough items — a common quantity-query pattern.
:nth-last-child() is a browser CSS pseudo-class. Node.js, Deno, and Bun do not apply it.
odd, even, and An+B from the end have been available across browsers for years (CSS3 Selectors). The of <selector> syntax is newer. Internet Explorer 9+ supports the classic form.
Bottom line: Safe for last-N and reverse odd/even patterns. Use of selectively. This is not a JavaScript runtime API.
:nth-last-child(-n+3) → last three.:nth-last-child(1) = :last-child.:nth-last-of-type().One line: :nth-last-child() is :nth-child() turned around — count from the end, same formulas.
Learn same-element-type counting from the end of the sibling list.
5 people found this page helpful