CSS :nth-last-child() Pseudo-Class

CSS :nth-last-child() Pseudo-Class

The CSS :nth-last-child() pseudo-class selects elements according to their position among siblings, counting backward from the last child of their parent. It supports fixed positions, odd and even patterns, mathematical formulas, and optional filtering with the of selector syntax.

:nth-last-child() Syntax

selector:nth-last-child(An+B) {
  property: value;
}

The :nth-last-child() pseudo-class accepts an integer, the keywords odd or even, or an An+B expression. Unlike :nth-child(), it counts sibling positions from the end.

Fixed Position

li:nth-last-child(2) {
  color: #006699;
}

Selects a list item when it is the second child from the end of its parent.

Odd and Even

li:nth-last-child(odd) {
  background-color: #eaf6fc;
}
li:nth-last-child(even) {
  background-color: #f5f5f5;
}

Selects alternating sibling positions, counting from the last child.

Formula

li:nth-last-child(3n+1) {
  font-weight: bold;
}

Selects the first, fourth, seventh, and subsequent positions counted backward from the end.

Filtered Syntax

li:nth-last-child(2 of .featured) {
  border-color: #006699;
}

Selects a list item when it is the second-to-last sibling matching .featured.

How :nth-last-child() Works

The browser determines an element's position among its element siblings, beginning with the last child and counting backward toward the first.

HTML Example

<ul>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
  <li>Item Four</li>
</ul>

CSS Example

li:nth-last-child(2) {
  color: #006699;
}

Item Three matches because it is the second child counted from the end of the list.

Counting Starts at One

The last child has position 1, the second-to-last child has position 2, and so on. Position zero does not match any element.

Elements Only

Text nodes, comments, and whitespace between elements are not included in sibling position calculations.

Each Parent Is Counted Separately

Counting restarts for each parent element. A selector can therefore match the second-to-last child in multiple separate lists.

Document Order

Positions are based on the document tree, not on visual ordering created by CSS Flexbox or Grid.

Selecting Fixed Positions

Use a positive integer inside :nth-last-child() to select an element at a specific position counted from the end.

Last Child

li:nth-last-child(1) {
  font-weight: bold;
}

Matches a list item only when it is the last child of its parent. This is equivalent to li:last-child.

Second-to-Last Child

li:nth-last-child(2) {
  color: #006699;
}

Matches a list item at position 2 when counting backward from the end.

Third-to-Last Child

li:nth-last-child(3) {
  border-bottom: 2px solid #006699;
}

Matches a list item at position 3 from the end, if one exists.

Position Zero

li:nth-last-child(0) {
  color: #006699;
}

This selector matches no elements because sibling positions start at 1.

Odd and Even Positions

The odd and even keywords select alternating positions, counting from the end of the sibling list.

Odd Positions from the End

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

Matches the last child, third-to-last child, fifth-to-last child, and so on.

Even Positions from the End

li:nth-last-child(even) {
  background-color: #f5f5f5;
}

Matches the second-to-last child, fourth-to-last child, sixth-to-last child, and so on.

Position Comparison

Equivalent Formulas

li:nth-last-child(2n+1) {
  background-color: #eaf6fc;
}
li:nth-last-child(2n) {
  background-color: #f5f5f5;
}

2n+1 is equivalent to odd, and 2n is equivalent to even.

The An+B Formula

The An+B formula defines a sequence of positions counted backward from the last child.

Formula Components

In An+B, A controls the interval, n is a nonnegative integer starting at zero, and B provides an offset. Only positive calculated positions can match.

Every Third Child from the End

li:nth-last-child(3n) {
  color: #006699;
}

Matches the third-to-last, sixth-to-last, ninth-to-last, and subsequent positions.

Every Third Child Starting at the End

li:nth-last-child(3n+1) {
  font-weight: bold;
}

Matches positions 1, 4, 7, 10, and so on, counted backward from the end.

Every Fourth Child Starting at Position Two

li:nth-last-child(4n+2) {
  background-color: #eaf6fc;
}

Matches positions 2, 6, 10, 14, and so on, counted from the end.

Common Formulas

Nonnegative Values of n

The formula uses n = 0, 1, 2, 3, and so on. Zero or negative results cannot match sibling positions.

Negative Formulas

Negative coefficients allow :nth-last-child() to select a limited number of elements near the end of a sibling list.

Last Three Children

li:nth-last-child(-n+3) {
  color: #006699;
}

Matches the last three children at positions 1, 2, and 3 from the end.

Last Five Children

li:nth-last-child(-n+5) {
  background-color: #eaf6fc;
}

Matches the last five children, or all children if fewer than five exist.

Positions Three Through Six from the End

li:nth-last-child(n+3):nth-last-child(-n+6) {
  font-weight: bold;
}

The first condition matches positions 3 and later when counting from the end. The second matches positions 1 through 6. Together, they select positions 3, 4, 5, and 6 from the end.

Excluding the Last Three Positions

li:nth-last-child(n+4) {
  color: #006699;
}

Matches children that have at least three element siblings after them.

Why Negative Formulas Work

With a negative coefficient, calculated positions decrease as n increases. Once a position becomes zero or negative, it cannot match.

The of Selector Syntax

The optional of selector list filters which siblings are counted. With :nth-last-child(), matching siblings are counted backward from the end.

Syntax

selector:nth-last-child(An+B of selector-list) {
  property: value;
}

HTML Example

<ul>
  <li class="featured">Featured One</li>
  <li>Regular One</li>
  <li class="featured">Featured Two</li>
  <li class="featured">Featured Three</li>
</ul>

CSS Example

li:nth-last-child(2 of .featured) {
  color: #006699;
  font-weight: bold;
}

This rule selects Featured Two because it is the second-to-last sibling matching .featured.

Filtered vs. Unfiltered

li.featured:nth-last-child(2) {
  color: #006699;
}
li:nth-last-child(2 of .featured) {
  background-color: #eaf6fc;
}

The first selector requires a featured list item to be the second child from the end overall. The second counts only featured siblings.

Multiple Filters

li:nth-last-child(odd of .featured, .important) {
  border-left: 3px solid #006699;
}

This rule matches alternating positions, counted from the end, among siblings with either the featured or important class.

Browser Compatibility

The of selector syntax is newer than basic :nth-last-child() formulas. Check compatibility when supporting older browsers.

Mixed Element Types

Without the of syntax, :nth-last-child() counts all element siblings, regardless of their element types.

HTML Example

<div>
  <h3>Heading</h3>
  <p>First paragraph</p>
  <p>Second paragraph</p>
  <p>Third paragraph</p>
</div>

CSS Example

p:nth-last-child(2) {
  color: #006699;
}

This rule selects the second paragraph because it is the second child counted from the end of the parent.

Selecting by Element Type

p:nth-last-of-type(2) {
  color: #006699;
}

This rule selects the second-to-last paragraph, regardless of other element types among its siblings.

Filtered Alternative

:nth-last-child(2 of p) {
  color: #006699;
}

This selector also selects the second-to-last paragraph by counting only paragraph siblings.

Important Difference

A type selector placed before :nth-last-child() restricts which elements can match but does not change which siblings are counted. The of syntax changes the counted set.

Related Pseudo-Classes

Several structural pseudo-classes select elements according to their position among siblings.

Comparison

CSS Example

li:nth-child(2) {
  color: #006699;
}
li:nth-last-child(2) {
  font-weight: bold;
}
p:nth-last-of-type(2) {
  margin-bottom: 20px;
}

These rules select the second list item from the beginning, the second list item from the end, and the second-to-last paragraph among paragraph siblings.

Choosing the Right Selector

Use :nth-last-child() when the position should be calculated from the end of all element siblings. Use :nth-last-of-type() when counting only siblings of the same element type.

:nth-last-child() Specificity

The :nth-last-child() pseudo-class contributes a specificity of 0-1-0. When the of syntax is used, the specificity of the most specific selector in its argument list is added.

Specificity Examples

Basic Specificity

li {
  color: #333;
}
li:nth-last-child(2) {
  color: #006699;
}

When both rules match and other cascade factors are equal, the :nth-last-child() rule takes precedence because it has greater specificity.

Filtered Specificity

li:nth-last-child(2 of .featured) {
  color: #006699;
}

The class selector inside the of argument adds to the pseudo-class's specificity.

Practical Uses

The :nth-last-child() pseudo-class is useful when styling depends on how close an element is to the end of a container.

Last Three Items

li:nth-last-child(-n+3) {
  font-weight: bold;
}

Emphasizes the last three list items.

Second-to-Last Item

li:nth-last-child(2) {
  border-bottom: 2px solid #006699;
}

Adds a border to the second-to-last list item.

Alternating from the End

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

Styles alternating list items beginning with the last item.

All Except the Last Two

li:nth-last-child(n+3) {
  color: #006699;
}

Styles list items that have at least two element siblings after them.

Filtered Items from the End

li:nth-last-child(2 of .featured) {
  border-left: 3px solid #006699;
}

Highlights the second-to-last featured list item.

Limitations

The :nth-last-child() pseudo-class depends on sibling structure and document order.

Counts All Element Siblings

Without the of syntax, different element types are included in the position count.

Not Based on Visual Order

Changing visual order with Flexbox or Grid does not change the positions used by the selector.

Position Changes with the DOM

Adding, removing, or reordering siblings can change which elements match.

Hidden Elements Are Counted

Elements hidden with display: none still participate in sibling counting unless excluded by an of selector list.

Each Parent Is Independent

Counting occurs separately within each parent and does not continue across different containers.

Filtered Syntax Compatibility

The optional of selector syntax requires newer browser versions than basic position formulas.

No Content-Based Matching

The pseudo-class selects elements by position, not by their text content or visual appearance.

Best Practices

• Use :nth-last-child() when selecting elements according to their position from the end.
• Use positive integers for fixed positions such as the second-to-last child.
• Use odd and even for alternating patterns counted backward.
• Use An+B formulas for repeating intervals.
• Use negative formulas to select a limited number of final siblings.
• Remember that counting begins at 1 with the last child.
• Use :nth-last-of-type() when counting siblings of the same element type.
• Use the of syntax when counting only siblings that match specific selectors.
• Remember that hidden elements and DOM changes affect sibling positions.
• Check compatibility when using the newer of selector syntax.

:nth-last-child() Example

This example demonstrates selecting elements from the end of a list. The last three items receive a light blue background, and the second-to-last item receives a blue left border and bold text.

HTML

<ul class="nth-last-child-demo">
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
  <li>Item Four</li>
  <li>Item Five</li>
  <li>Item Six</li>
</ul>

CSS

.nth-last-child-demo {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nth-last-child-demo li {
  padding: 10px 12px;
  margin-bottom: 5px;
  border-left: 4px solid transparent;
  background-color: #f5f5f5;
}
.nth-last-child-demo li:nth-last-child(-n+3) {
  background-color: #eaf6fc;
}
.nth-last-child-demo li:nth-last-child(2) {
  border-left-color: #006699;
  font-weight: bold;
}

Browser Result

Play in Editor

Note: Items 4, 5, and 6 receive a light blue background because they are the last three children. Item 5 also receives a blue left border and bold text because it is the second-to-last child.

Browser Support

Baseline: Widely available. Basic :nth-last-child() selectors, including integers, odd, even, and An+B formulas, are supported in all major modern browsers. The optional of selector syntax was introduced later and requires more recent browser versions.

For current compatibility information, visit Can I Use? .

Specifications

The :nth-last-child() pseudo-class is defined in CSS Selectors Level 4 as a structural pseudo-class. It supports An+B formulas and an optional of selector list for filtering siblings.

Selectors Level 4 - :nth-last-child()