Question

given a table

<table>
<tr class="sechead">...
<tr>...
<tr>... 
<tr class="sechead">...
<tr>...
<tr>...
</table>

I have tried the following. I want it to alternate the colours for the rows coming after sechead.

table tr.sechead:nth-child(even) ~ tr{background-color:rgb(75,172,198);}
table tr.sechead:nth-child(odd) ~ tr{background-color:rgb(153,129,189);}

It color all the rows with the same color. Any possible solutions for this?

Answer 1

The problem is that all of the rows after the .sechead come after the first .sechead

If adjusting the HTML is okay, you could try this:

<table>
  <tbody>
    <tr class="sechead">...</tr>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tbody>
    <tr class="sechead">...</tr>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  ...
</table>

Then your style can be:

tbody > tr {background-color:rgb(75,175,198);}
tbody:nth-child(even) > tr {background-color:rgb(153,129,189);}

Note that I removed the “odd” selector, so that browsers that don’t support nth-child still have a fallback defined.