:nth-last-of-type CSS Pseudo Class
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 ...
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 | |||||
12 | 4 | 3.5 | 9.5 | 3.1 |
Tablets / Mobile | |||||
18 | 4 | 10.1 | 2 | 1 | 2 |
Last updated by CSSPortal on: 1st October 2023