⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

nth child Tutorial Selector Alternate Colors

Published : November 17, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury
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>
▲