How do I make both tr:hover and tr:nth-child(even) work together

I am trying to set the background in table rows to coral when hover a mouse over the table row. The problem is I am also using nth-child(even) to set every even numbered table row to a slight gray for readability. And when I do this, td:hover {background-color: coral} will only change background to coral of even table rows instead of every table row.

Below is the code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:hover {
background-color: coral;
}

tr:nth-child(even) {background-color: #f2f2f2;}
</style>
</head>
<body>

<h2>Striped Table</h2>

<p>For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:</p>

<table>
  <tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Points</th>
  </tr>
  <tr>
  <td>Peter</td>
  <td>Griffin</td>
  <td>$100</td>
  </tr>
  <tr>
  <td>Lois</td>
  <td>Griffin</td>
  <td>$150</td>
  </tr>
  <tr>
  <td>Joe</td>
  <td>Swanson</td>
  <td>$300</td>
  </tr>
  <tr>
  <td>Cleveland</td>
  <td>Brown</td>
  <td>$250</td>
  </tr>
</table>

</body>
</html>

Can anybody see how to fix this?
Thank you.

Remember, when two rules have the same specificity then it matters which one comes last in the CSS file.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.