# nth-last-of-type pseudo-class

The `nth-last-of-type` pseudo-class selects an element that is the nth child of a parent of a given type, starting from the end. It behaves similarly to `nth-of-type`, only counting is from the end.

## Syntax

`selector:nth-last-of-type(number | odd | even | expression) { }`

## Values

Value | Description
--- | ---
number | A positive number starting with `1`. It specifies the number of the element we want to access. Numbering of elements begins with `1`.
`odd` | Odd elements.
`even` | Even elements.
expression | You can create special expressions with the letter n, which stands for all integers from zero (not one) to infinity. So, `2n` means all even numbers (starting from the second). How to understand this? We sequentially substitute into `n` the numbers from `0` and so on: if n = 0, then 2n will give 0 - there is no such element (numbering of elements starting from 1), if n = 1, then 2n gives 2 - the second element, if n = 2, 2n gives 4 - the fourth element. If you write 3n, it will be every third element (starting from the third), and so on.

## Пример

Let's find `h2`, which is `2`nd `h2` in the parent from the end:

`<div> <h2>header</h2> <p>paragraph</p> <h2>header</h2> <p>paragraph</p> <h2>header</h2> <p>paragraph</p> <h2>header</h2> <p>paragraph</p> <h2>header</h2> <p>paragraph</p> <h2>header</h2> <p>paragraph</p> <h2>header</h2> <p>paragraph</p> </div>` `h2:nth-last-of-type(2) { color: red; }`

:

## Example

Let's find all even `h2` from the end:

`<div> <h2>header</h2> <p>paragraph</p> <h2>header</h2> <p>paragraph</p> <h2>header</h2> <p>paragraph</p> <h2>header</h2> <p>paragraph</p> <h2>header</h2> <p>paragraph</p> <h2>header</h2> <p>paragraph</p> <h2>header</h2> <p>paragraph</p> </div>` `h2:nth-last-of-type(even) { color: red; }`

:

## Example

Let's find all odd `h2` from the end:

`<div> <h2>header</h2> <p>paragraph</p> <h2>header</h2> <p>paragraph</p> <h2>header</h2> <p>paragraph</p> <h2>header</h2> <p>paragraph</p> <h2>header</h2> <p>paragraph</p> <h2>header</h2> <p>paragraph</p> <h2>header</h2> <p>paragraph</p> </div>` `h2:nth-last-of-type(odd) { color: red; }`

:

← →
↑
en ru