Effect How to - Skip every other cell on hover with highlight the table cell

Question

We would like to know how to skip every other cell on hover with highlight the table cell.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
td:nth-child(odd) {<!--   w w  w.  j a v  a 2s  . c o  m-->
  background: red;
}

td:nth-child(odd):hover {
  background: yellow;
}
</style>
</head>
<body>
  <table>
    <tr>
      <td>Word</td>
      <td>000</td>
      <td>Word</td>
      <td>123</td>
    </tr>
  </table>
</body>
</html>

The code above is rendered as follows: