CSS :nth-last-of-type() Selector

CSS :nth-last-of-type(n) selector selects every element that is the nth child of its type within its parent, but counting from the last. This selector is just the opposite of the :nth-of-type() selector.

The value n in the :nth-last-of-type(n) selector can be a:

• Number – Like 1, 2, 3, 4, …
• Keyword – Like even & odd
• Formula – Like (2n + 1), (2n + 2), (3n + 1), etc.

Unlike the :nth-last-child() selector, the :nth-last-of-type() selector selects every nth element of its type counting from the last.

For example, If you use :nth-last-of-type(3), it would select every third element of its type counting from the last. It means, this third element can be a <p>, <div>, <ul>, <li>, etc.

See this working example:

Example:

:nth-last-of-type(3){
   background: yellow;
}

If you want to select the nth last element of a specific type only, you can do this by simply preceding the :nth-last-of-type() selector with the type of the element.

For example, if you want to select the 3rd last element of type <p>, you have to use p:nth-last-of-type(3).

Here is an example:

Example:

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

You can also use keywords like even & odd to select elements that are at even and odd positions counting from the last.

In the following example, the :nth-last-of-type() selector sets a yellow background color to the <p> elements that are at odd positions and sets a cyan color background to the <p> elements that are at even positions.

Example:

p:nth-last-of-type(odd){
   background: yellow;
}
p:nth-last-of-type(even){
   background: cyan;
}

The :nth-last-of-type() selector is not just limited to numbers or keywords. You can even use a formula in the form of (an + b) and select all the matching elements.

For example, If you use (2n + 0), it would select elements whose indexes are a multiple of 2 i.e. Elements at positions 2, 4, 6, 8, … and so on. But remember, these indexes must be counted from the last.

Similarly, If you use (2n + 1), it would select elements that are at positions 1, 3, 5, 7, … and so on counting from the last.

See this example for clarification:

Example:

p:nth-last-of-type(2n+1){
   background: yellow;
}
p:nth-last-of-type(2n+0){
   background: cyan;
}

CSS Syntax

The syntax of the :nth-last-of-type() selector is as follows:

:nth-last-of-type(n){
    CSS Styles;
}

Browser Support

The number in each cell of the table specifies the first version of the browser that fully supports the :nth-last-of-type() selector.