2

I have a .hover table class I want to modify so each row hover is a different color. I have to create a class as I'm applying it to different tables across a wordpress site not globally to tr, td, tbody.

Table HTML is stripped down for clarity's sake.

 .hover tbody tr:hover {background-color: #ebebeb;}
<table class="hover">
      <thead>
        <tr>
          <th><br>
          </th>
          <th>V</th>
          <th>W</th>
          <th>X</th>
          <th>Y</th>
          <th>Z</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>A</td>
          <td>40</td>
          <td>60</td>
          <td>90</td>
          <td>120</td>
          <td>130</td>
        </tr>
        <tr>
          <td>B</td>
          <td>345</td>
          <td>490</td>
          <td>540</td>
          <td>540</td>
          <td>580</td>
        </tr>
        <tr>
          <td>C</td>
          <td>70</td>
          <td>71</td>
          <td>71</td>
          <td>72</td>
          <td>71.5</td>
        </tr>
        <tr>
          <td>D</td>
          <td>4</td>
          <td>9</td>
          <td>10</td>
          <td>13</td>
          <td>16</td>
        </tr>
      </tbody>
    </table>
timBob
  • 27
  • 4

1 Answers1

1

If I understand your task correctly, then this can be done using the nth-child() pseudo-class for each line, as here:

.hover tbody tr:nth-child(1):hover {background-color: #ebebeb;}

Do you need such a result?

.hover tbody tr:nth-child(1):hover {background-color: #ebebeb;}
.hover tbody tr:nth-child(2):hover {background-color: red;}
.hover tbody tr:nth-child(3):hover {background-color: green;}
.hover tbody tr:nth-child(4):hover {background-color: blue;}
<table class="hover">
      <thead>
        <tr>
          <th><br>
          </th>
          <th>V</th>
          <th>W</th>
          <th>X</th>
          <th>Y</th>
          <th>Z</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>A</td>
          <td>40</td>
          <td>60</td>
          <td>90</td>
          <td>120</td>
          <td>130</td>
        </tr>
        <tr>
          <td>B</td>
          <td>345</td>
          <td>490</td>
          <td>540</td>
          <td>540</td>
          <td>580</td>
        </tr>
        <tr>
          <td>C</td>
          <td>70</td>
          <td>71</td>
          <td>71</td>
          <td>72</td>
          <td>71.5</td>
        </tr>
        <tr>
          <td>D</td>
          <td>4</td>
          <td>9</td>
          <td>10</td>
          <td>13</td>
          <td>16</td>
        </tr>
      </tbody>
    </table>
s.kuznetsov
  • 14,870
  • 3
  • 10
  • 25