CSS :nth-last-of-type() Pseudo-Class

CSS :nth-last-of-type() Pseudo-Class

The CSS :nth-last-of-type() pseudo-class selects elements according to their position among siblings of the same HTML element type, counting backward from the last matching type. It supports fixed positions, odd and even patterns, and mathematical formulas.

:nth-last-of-type() Syntax

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

The :nth-last-of-type() pseudo-class accepts a positive or negative integer, the keywords odd or even, or an An+B expression. It counts siblings of the same element type from the end.

Fixed Position

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

Selects the second-to-last paragraph among paragraph siblings.

Odd and Even

p:nth-last-of-type(odd) {
  background-color: #eaf6fc;
}
p:nth-last-of-type(even) {
  background-color: #f5f5f5;
}

Selects alternating paragraph positions, counting backward from the last paragraph.

Formula

p:nth-last-of-type(3n+1) {
  font-weight: bold;
}

Selects the last paragraph, fourth-to-last paragraph, seventh-to-last paragraph, and so on.

No of Selector Argument

Unlike :nth-last-child(), :nth-last-of-type() does not accept an optional of selector list. It always counts siblings of the same element type.

How :nth-last-of-type() Works

The browser counts siblings with the same element type as the element being tested, beginning with the last sibling of that type and moving backward.

HTML Example

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

CSS Example

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

The second paragraph matches because it is the second-to-last paragraph. The heading does not affect the paragraph count.

Counting Starts at One

The last sibling of a particular element type has position 1, the second-to-last has position 2, and so on.

Different Element Types Are Ignored

Headings, images, and other element types do not affect the position count for paragraphs.

Each Parent Is Independent

Counting restarts for each parent element. Paragraphs in separate containers are counted independently.

Document Order

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

Selecting Fixed Positions

Use a positive integer to select a specific position among siblings of the same type, counting backward from the end.

Last Paragraph

p:nth-last-of-type(1) {
  font-weight: bold;
}

Matches the last paragraph among its paragraph siblings. This is equivalent to p:last-of-type.

Second-to-Last Paragraph

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

Matches the second-to-last paragraph.

Third-to-Last List Item

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

Matches the third-to-last <li> element among its list item siblings.

Position Zero

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

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

Odd and Even Positions

The odd and even keywords select alternating positions among siblings of the same element type, counting from the end.

Odd Positions

p:nth-last-of-type(odd) {
  background-color: #eaf6fc;
}

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

Even Positions

p:nth-last-of-type(even) {
  background-color: #f5f5f5;
}

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

Position Comparison

Equivalent Formulas

p:nth-last-of-type(2n+1) {
  background-color: #eaf6fc;
}
p:nth-last-of-type(2n) {
  background-color: #f5f5f5;
}

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

The An+B Formula

The An+B formula defines a sequence of positions among siblings of the same element type, counting from the end.

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 Paragraph from the End

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

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

Every Third Paragraph Starting at the End

p:nth-last-of-type(3n+1) {
  font-weight: bold;
}

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

Every Fourth Paragraph Starting at Position Two

p:nth-last-of-type(4n+2) {
  background-color: #eaf6fc;
}

Matches paragraph 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 element positions.

Negative Formulas

Negative coefficients can select a limited number of elements near the end of a group of siblings of the same type.

Last Three Paragraphs

p:nth-last-of-type(-n+3) {
  color: #006699;
}

Matches the last three paragraphs among their paragraph siblings.

Last Five Paragraphs

p:nth-last-of-type(-n+5) {
  background-color: #eaf6fc;
}

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

Positions Three Through Six from the End

p:nth-last-of-type(n+3):nth-last-of-type(-n+6) {
  font-weight: bold;
}

Combines two formulas to select paragraphs at positions 3, 4, 5, and 6 from the end.

Exclude the Last Three Paragraphs

p:nth-last-of-type(n+4) {
  color: #006699;
}

Matches paragraphs that have at least three paragraph siblings after them.

Why Negative Formulas Work

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

Mixed Element Types

The :nth-last-of-type() pseudo-class ignores siblings of different element types when calculating positions.

HTML Example

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

CSS Example

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

The second paragraph matches because it is the second-to-last paragraph. The heading and nested div do not affect the paragraph count.

Compare with :nth-last-child()

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

In this example, the second-to-last child overall is the nested div, so no paragraph matches p:nth-last-child(2).

Selecting the Last Paragraph

p:nth-last-of-type(1) {
  font-weight: bold;
}

This rule selects the last paragraph even when other element types appear after earlier paragraphs.

Classes and Element Types

The :nth-last-of-type() pseudo-class counts elements by HTML element type, not by class name.

HTML Example

<div>
  <p class="featured">Featured One</p>
  <p>Regular Paragraph</p>
  <p class="featured">Featured Two</p>
  <p class="featured">Featured Three</p>
</div>

CSS Example

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

This rule selects Featured Two because it is the second-to-last paragraph overall and has the featured class.

Class Filtering Does Not Change Counting

The featured class restricts which paragraphs can match the rule, but all paragraph siblings are still counted.

Counting Only Featured Elements

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

This rule counts only siblings with the featured class and selects Featured Two as the second-to-last featured element.

Choosing the Right Selector

Use :nth-last-of-type() to count by HTML element type. Use :nth-last-child(... of selector) to count siblings matching a class or another selector.

Related Pseudo-Classes

Several structural pseudo-classes select elements based on sibling position, element type, or counting direction.

Comparison

CSS Example

p:nth-of-type(2) {
  color: #006699;
}
p:nth-last-of-type(2) {
  font-weight: bold;
}
p:last-of-type {
  border-bottom: 2px solid #006699;
}

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

Choosing the Right Selector

Use :nth-last-of-type() when counting from the end among siblings of the same element type. Use :nth-last-child() when the position among all element siblings matters.

:nth-last-of-type() Specificity

The :nth-last-of-type() pseudo-class contributes a specificity of 0-1-0, like other structural pseudo-classes.

Specificity Examples

Specificity Example

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

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

Class Selectors

p.featured:nth-last-of-type(2) {
  font-weight: bold;
}

Adding a class selector increases specificity but does not change the type-based counting behavior.

Practical Uses

The :nth-last-of-type() pseudo-class is useful for styling elements based on their position among siblings of the same type.

Last Three Paragraphs

article p:nth-last-of-type(-n+3) {
  background-color: #eaf6fc;
}

Highlights the last three paragraphs among their paragraph siblings.

Second-to-Last Heading

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

Styles the second-to-last third-level heading within each parent.

Alternating Table Rows

tbody tr:nth-last-of-type(even) {
  background-color: #f5f5f5;
}

Applies alternating row colors, counting from the last row of each table body.

All Except the Last Two Paragraphs

p:nth-last-of-type(n+3) {
  margin-bottom: 16px;
}

Applies spacing to paragraphs that have at least two paragraph siblings after them.

Repeated Patterns

.card:nth-last-of-type(3n) {
  border-color: #006699;
}

Styles every third sibling of the same element type, counting backward from the end, when that sibling has the card class.

Limitations

The :nth-last-of-type() pseudo-class depends on element types and their positions within the document tree.

Counts by Element Type

The selector counts siblings of the same HTML element type. It does not count only elements with a particular class.

No of Selector Syntax

The pseudo-class does not support the optional of selector list available in :nth-last-child().

Not Based on Visual Order

Flexbox and Grid can change visual placement without changing the document order used for counting.

DOM Changes Affect Matching

Adding, removing, or reordering siblings of the same type can change which elements match.

Hidden Elements Are Counted

Elements hidden with display: none still participate in type-based counting.

Each Parent Is Independent

Counting restarts within each parent element and does not continue across separate containers.

Different Types Are Not Grouped

Elements such as <h2> and <h3> are different types, even though both are headings.

Best Practices

• Use :nth-last-of-type() when counting siblings of the same element type from the end.
• Use positive integers for fixed positions, such as the second-to-last paragraph.
• Use odd and even for alternating patterns.
• Use An+B formulas for repeating intervals and position ranges.
• Use negative formulas to select a limited number of final siblings of the same type.
• Remember that counting begins at 1 with the last sibling of the same type.
• Do not assume a class selector changes which siblings are counted.
• Use :nth-last-child(... of selector) when filtering by classes or other selectors.
• Remember that hidden elements and DOM changes can affect matching.
• Keep selectors readable and test them with mixed element types.

:nth-last-of-type() Example

This example demonstrates selecting paragraphs by their position among paragraph siblings, counting from the end. The last three paragraphs receive a light blue background, and the second-to-last paragraph receives a blue left border and bold text. A heading between paragraphs is ignored during counting.

HTML

<div class="nth-last-of-type-demo">
  <p>Paragraph One</p>
  <p>Paragraph Two</p>
  <h3>Section Heading</h3>
  <p>Paragraph Three</p>
  <p>Paragraph Four</p>
  <p>Paragraph Five</p>
</div>

CSS

.nth-last-of-type-demo p {
  padding: 10px 12px;
  margin-bottom: 5px;
  border-left: 4px solid transparent;
  background-color: #f5f5f5;
}
.nth-last-of-type-demo p:nth-last-of-type(-n+3) {
  background-color: #eaf6fc;
}
.nth-last-of-type-demo p:nth-last-of-type(2) {
  border-left-color: #006699;
  font-weight: bold;
}
.nth-last-of-type-demo h3 {
  margin: 12px 0;
  font-size: 1rem;
}

Browser Result

Play in Editor

Note: Paragraphs Three, Four, and Five receive the light blue background. Paragraph Four also receives a blue left border and bold text. The heading does not affect paragraph counting.

Browser Support

Baseline: Widely available. The :nth-last-of-type() pseudo-class is supported in modern versions of Chrome, Edge, Firefox, Safari, and other major browsers. Integer positions, odd, even, and An+B formulas are widely supported.

For current compatibility information, visit Can I Use? .

Specifications

The :nth-last-of-type() pseudo-class is defined in CSS Selectors Level 4 as a structural pseudo-class. It selects elements according to their position among siblings of the same element type, counting from the end.

Selectors Level 4 - :nth-last-of-type()