CSS :nth-last-child() Selector

What You’ll Learn

The :nth-last-child() pseudo-class targets elements by their position counting from the end of the sibling list. It is the reverse counterpart to :nth-child().

Introduction

The :nth-last-child() selector in CSS lets you target elements based on their position within a parent — but counting from the last child backward instead of from the first.

It is especially useful when you need to style the last few items, highlight the final row, or apply reverse-order patterns without rearranging your HTML.

Definition and Usage

Write element:nth-last-child(n) where n is a number, the keyword odd or even, or a formula like 2n+1 or -n+3.

📝 Syntax

The syntax for the :nth-last-child() pseudo-class is:

element:nth-last-child(n) {
  /* CSS properties */
}

element is the tag you want to style. n can be a number, keyword, or an+b formula.

Common Patterns

The an+b Formula (Reverse Direction)

• n is a counter starting at 0, increasing by 1 for each child from the end.
• a is the step size — positive steps skip toward the start; negative steps select the last N items.
• b is the offset — the starting position when counting from the last child.

Related Selectors

• :nth-child() — counts from the first sibling forward
• :last-child — shorthand for :nth-last-child(1)
• :nth-last-of-type() — counts only siblings of the same tag type, from the end
• :not() — combine for exclusions like li:not(:nth-last-child(1))

When to Use :nth-last-child()

:nth-last-child() shines when the end of a list matters more than the start:

• Highlight the last item — li:nth-last-child(1) or combine with :last-child.
• Style the last N items — li:nth-last-child(-n+3) for the final three cards.
• Reverse zebra stripes — li:nth-last-child(2n) stripes from the bottom up.
• Second-to-last row — tr:nth-last-child(2) for a footer row above the last.
• Dynamic lists — When items are added at the end, reverse counting stays anchored to the bottom.

Examples Gallery

Practice :nth-last-child() with last-item styling, reverse stripes, second-to-last targeting, and the last-three pattern.

li:nth-last-child(1) {
  color: #b91c1c;
  font-weight: 700;
}

li:nth-last-child(2n) {
  background: #dbeafe;
}

li:nth-last-child(odd) {
  background: #f1f5f9;
}

/* Equivalent to :nth-last-child(2n+1) */

li:nth-last-child(2) {
  background: #dcfce7;
  border-left: 4px solid #16a34a;
  padding-left: 0.65rem;
}

li:nth-last-child(-n+3) {
  background: #fef3c7;
  border-left: 4px solid #d97706;
  padding-left: 0.65rem;
}

💬 Usage Tips

• Prefer :last-child for one item — :nth-last-child(1) works, but :last-child is more readable.
• Use -n+k for last N — -n+3 last three, -n+5 last five.
• Combine selectors — ul li:nth-last-child(2) scopes to list items inside a ul.
• Test formulas — Plug n=0,1,2 into an+b to verify which reverse positions match.
• When type matters — Switch to :nth-last-of-type() if mixed tags break your count.

⚠️ Common Pitfalls

• Counts from the end, not the start — :nth-last-child(odd) is not the same as :nth-child(odd).
• Counts all children — A <div> before your <li> shifts the count; use :nth-last-of-type() if needed.
• 1-based, not 0-based — The last child is :nth-last-child(1), not 0.
• Empty text nodes — Whitespace-only text nodes between elements can affect counting in some parsers.
• Overlapping rules — Multiple :nth-last-child() rules can apply to the same element; watch specificity.

♿ Accessibility

• Contrast on highlights — Last-item or last-N styling must still meet WCAG contrast requirements.
• Do not rely on color alone — Pair visual cues with text labels or icons where meaning matters.
• Semantic lists — Use proper <ul>/<ol> markup for screen readers.
• Dynamic content — When items are added via JavaScript, reverse selectors stay anchored to the end without extra classes.

💡 Best Practices