: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 ...
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;
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
Explorer Edge Chrome Firefox Opera Safari
91243.593.2
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
≤3718410.13.2Yes