Try it Yourself: CSS Pseudo-classes

CSS Pseudo-classes

<!DOCTYPE html>
<html>
<head>
<style>
td {
  padding: 6px 12px;
}

tr:nth-child(even) {
  background: #f2f2f2;
}

tr:nth-child(odd) {
  background: #fff;
}
</style>
</head>
<body>

<table>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3</td></tr>
  <tr><td>Row 4</td></tr>
</table>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
td {
  padding: 6px 12px;
}

tr:nth-child(even) {
  background: #f2f2f2;
}

tr:nth-child(odd) {
  background: #fff;
}
</style>
</head>
<body>

<table>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3</td></tr>
  <tr><td>Row 4</td></tr>
</table>

</body>
</html>