nth child Tutorial Selector Alternate Colors
Learn to create CSS alternating style logic for your elements by using the nth-child pseudo-class selector in your HTML documents.
<!DOCTYPE html>
<html>
<head>
<style>
.myTable { width:100%; border-collapse:collapse; }
.myTable td { padding:8px; border:#999 1px solid; }
.myTable tr:nth-child(even) { /*(even) or (2n+0)*/
background: #A4D1FF;
}
.myTable tr:nth-child(odd) { /*(odd) or (2n+1)*/
background: #EAF4FF;
}
</style>
</head>
<body>
<table class="myTable">
<tr>
<td>Row 1 content</td>
</tr>
<tr>
<td>Row 2 content</td>
</tr>
<tr>
<td>Row 3 content</td>
</tr>
<tr>
<td>Row 4 content</td>
</tr>
</table>
</body>
</html>