:nth-last-of-type CSS Pseudo Class

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

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.

Syntax

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

Values

  • 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.

Example

<table>
<tr>
<td>No</td>
<td>Competition</td>
<td>John</td>
<td>Adam</td>
<td>Robert</td>
<td>Paul</td>
</tr>
<tr>
<td>1</td>
<td>Swimming</td>
<td>1:30</td>
<td>2:05</td>
<td>1:15</td>
<td>1:41</td>
</tr>
<tr>
<td>2</td>
<td>Running</td>
<td>15:30</td>
<td>14:10</td>
<td>15:45</td>
<td>16:00</td>
</tr>
<tr>
<td>3</td>
<td>Shooting</td>
<td>70%</td>
<td>55%</td>
<td>90%</td>
<td>88%</td>
</tr>
</table>
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.

Desktop
Edge Chrome Firefox Opera Safari
1243.59.53.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.1212

Last updated by CSSPortal on: 1st October 2023