:nth-last-child CSS Pseudo Class
Description
The :nth-last-child pseudo-class is used to add style to elements based on the numbering in the element tree. Unlike the pseudo-class :nth-child, the count is not from the first element, but from the last.
Syntax
element:nth-last-child (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;
border-left: 3px double #333;
}
td:nth-last-child(2n+1) {
background: #a3ffa8;
}
td:nth-child(1) {
border: 1px solid #333;
background: #d9a3ff;
} Browser Support
| Desktop | |||||
 |
 |
 |
 |
 |
 |
| 9 | 12 | 4 | 3.5 | 9 | 3.2 |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| ≤37 | 18 | 4 | 10.1 | 3.2 | Yes |