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

Definition and Usage

CSS :nth-last-of-type(n) pseudo-classes are used to match the element that is the nth child of a specific type from the end of its parent element. n of each element.

n It can be a number/index, a keyword (odd or even), or a formula (such as an + b).

Tip:View :nth-last-child() pseudo-classes are used to select the element that is the nth child from the end of its parent element. n of any child elements, regardless of their type.

Instance

Example 1

Specify the background color for each <p> element that is the second child from the end of its parent element.

At the same time, specify the background color for each <li> element that is the third child from the end of its parent element:

p:nth-last-of-type(2) {
  background: red;
}
li:nth-last-of-type(3) {
background: yellow;
}

Try it yourself

Example 2

odd and even is a keyword that can be used to match child elements whose index is odd or even (the index of the first child element is 1).

Here, we specify different background colors for <p> elements with odd and even indices:

p:nth-last-of-type(odd) {
  background: red;
}
p:nth-last-of-type(even) {
  background: blue;
}

Try it yourself

Example 3

Using the formula (an + b). Description: a represents the integer step, n is all non-negative integers starting from 0, and b is the integer offset.

Here, we specify the background color for all <p> and <li> elements whose last index is a multiple of 3:

p:nth-last-of-type(3n) {
  background: red;
}
li:nth-last-of-type(3n) {
  background: yellow;
}

Try it yourself

CSS Syntax

:nth-last-of-type(index | odd | even | an+b) {
  css declarations;
}

Technical Details

Browser Support

The numbers in the table specify the first browser version to fully support the pseudo-class.