:nth-last-of-type CSS Pseudo Class


The CSS :nth-last-of-type() pseudo-class selects elements based on their position among siblings of the same type (tag name), counting from the end. It is similar to the :nth-of-type() pseudo-class, but instead of counting from the beginning, it counts from the end.

The :nth-last-of-type() pseudo-class takes a single argument, which can be a number, a keyword, or a formula. If a number is specified, only one element will be selected. If the keywords even or odd are specified, all even or odd elements will be selected, respectively. If a formula is specified, all elements that match the formula will be selected.

Here are some examples of how to use the :nth-last-of-type() pseudo-class:

/* Select the last `li` element in a list */
li:nth-last-of-type(1) {
background-color: red;

/* Select the second to last `p` element in a paragraph */
p:nth-last-of-type(2) {
font-size: 20px;

/* Select all even `div` elements in a container */
.container div:nth-last-of-type(even) {
border: 1px solid black;

/* Select all elements that are the fourth multiple of `3` */
div:nth-last-of-type(4n) {
margin-top: 10px;

The :nth-last-of-type() pseudo-class is a powerful tool for styling elements based on their position in a group of siblings. It can be used to create a wide variety of effects, such as highlighting the first or last element in a list, adding different borders to even and odd elements, or creating a grid layout.


element: nth-last-of-type (odd | even | <number> | <expression>) {
  /* ... */


  • oddAll odd item numbers.
  • evenAll even item numbers.
  • <number>The serial number of the child relative to its parent. Numbering starts with 1, this will be the first item in the list.
  • <expression>It is given in the form an ± b , where a and b are integers, and n is a counter that automatically takes the value 0, 1, 2 ...
If a is zero, then it is not written and the record is reduced to b. If b is zero, then it is also not specified and the expression is written in the form an. a and b can be negative numbers, in which case the plus sign changes to minus, for example: 5n-1.
By using negative values ​​of a and b, some results can also turn out to be negative or equal to zero. However, elements are affected only by positive values ​​due to the numbering of elements starting at 1.


table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
td {
border: 1px solid #333;
padding: 3px;
td:not(:first-of-type) {
border-left: 3px double #333;
td:first-of-type {
background: #eb9;
td:nth-last-of-type(2n+1) {
background: #d9a3ff;

Browser Support

The following table will show you the current browser support for the CSS :nth-last-of-type pseudo class.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st October 2023