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

Definition and Usage

CSS :nth-last-of-type(n) pseudo-classes are used to match elements that are the nth last child of a specific type in their 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 elements that are the nth last child of their parent element. n of a child element, regardless of its type.

Instance

Example 1

Specify the background color for each <p> element that is the second last child of its parent element:

At the same time, specify the background color for each <li> element that is the third last child 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.