:nth-child CSS Pseudo Class
Description
The :nth-child
pseudo-class is used to add style to elements based on the numbering in the element tree.
Syntax
element:nth-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;
}
tr:nth-child(2n) {
background: #a3ffa8;
}
tr:nth-child(1) {
background: #001aad;
color: #fff;
}
Browser Support
Desktop | |||||
9 | 12 | 1 | 3.5 | 9.5 | 3.1 |
Tablets / Mobile | |||||
![]() |
|||||
≤37 | 18 | 4 | 10.1 | 2 | 1.0 |
Last updated by CSSPortal on: 25th November 2019