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

Definition and usage

CSS :nth-last-of-type(n) pseudo-class to match as the nth child element of a specific type from the end of its parent element. n elements of each child 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-class to select as the nth child element from the end of its parent element. n element, regardless of its type.

Instance

Example 1

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

At the same time, specify the background color for each <li> element that is the third 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 with odd or even indices (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

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 with an index that is a multiple of 3 from the end:

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 this pseudo-class.