Precedence

[jalarie]

I'd like to use CSS to set the basic colors of a table and to set a row hover color. I don't understand why the hover entry seems to be at a lower precedence than the basic color entry in the code below. And, of course, I'd love to find out how to get around the problem!

 <style type="text/css">
  .table1 td {
   background-color: #00ffff;
   color: black;
  }
  .table1 tbody tr:hover {
   background-color: pink;
  }
 </style>
  <table border="1" class="table1">
  <thead>
   <tr>
   <th>Column 1</th>
   <th>Column 2</th>
   </tr>
  </thead>
  <tbody>
   <tr>
   <td>Row 1: Col 1</td>
   <td>R1C2</td>
   </tr>
   <tr>
   <td>Row 2: Col 1</td>
   <td>R2C2</td>
   </tr>
  </tbody>
  </table>

[Ingolemo]

Table rows appear below table cells because they are higher up in the document tree; the background colour of your td is showing over the top of the background colour on your tr.

I think you will get the effect you're looking for if you try this as your hover selector;

 .table1 tr:hover td