How to make a zebra list in this situation? with css

Issue

I have the following problem, using Angularjs and the tag because of the group loops, I have this situation. How to solve this list to get zebra correctly?

<table>
<tbody>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>aaaaaaaa</td></tr>
</tbody>
<tbody>
    <tr><td>bbbbbbbb</td></tr>
</tbody>
    <tr><td>bbbbbbbb</td></tr>
<tbody>
    <tr><td>aaaaaaaa</td></tr>
</tbody>
<tbody>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>bbbbbbbb</td></tr>
</tbody>   
<tbody>
    <tr><td>bbbbbbbb</td></tr>
    
    <tbody>
    <tr><td>aaaaaaaa</td></tr>
    </tbody>
    <tbody>
    <tr><td>aaaaaaaa</td></tr>
    </tbody>
    <tbody>
    <tr><td>bbbbbbbb</td></tr>
    </tbody>
    <tbody>
    <tr><td>bbbbbbbb</td></tr>
    </tbody>
</table>

table tbody tr:nth-child(4n-1), table tbody tr:nth-child(4n+1)  {
    background: #ccc;
}

not working ..

Solution

OPTION 1

If you have to style the HTML without changing the HTML structure as you've pasted it in (if it's dynamically loaded and you aren't able to edit the structure which I'll assume is the case), if you can add a couple of lines of JS, then I would try something like this:

var allTheTrs = document.querySelectorAll('tr');

for(var [index,tr] of allTheTrs.entries()){
  if(index % 2 == 1){
    tr.classList.add('color-me');
  }
}

.color-me {
  background: pink;
}

  <table>
  <tbody>
      <tr><td>aaaaaaaa</td></tr>
      <tr><td>aaaaaaaa</td></tr>
  </tbody>
  <tbody>
      <tr><td>bbbbbbbb</td></tr>
  </tbody>
      <tr><td>bbbbbbbb</td></tr>
  <tbody>
      <tr><td>aaaaaaaa</td></tr>
  </tbody>
  <tbody>
      <tr><td>aaaaaaaa</td></tr>
      <tr><td>bbbbbbbb</td></tr>
  </tbody>   
  <tbody>
      <tr><td>bbbbbbbb</td></tr>

      <tbody>
      <tr><td>aaaaaaaa</td></tr>
      </tbody>
      <tbody>
      <tr><td>aaaaaaaa</td></tr>
      </tbody>
      <tbody>
      <tr><td>bbbbbbbb</td></tr>
      </tbody>
      <tbody>
      <tr><td>bbbbbbbb</td></tr>
      </tbody>
  </table>

OPTION 2

But if you could edit the HTML, I would nest all of the <trs> in a single <tbody> like so:

<table>
<tbody>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>bbbbbbbb</td></tr>
    <tr><td>bbbbbbbb</td></tr>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>bbbbbbbb</td></tr>  
    <tr><td>bbbbbbbb</td></tr>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>bbbbbbbb</td></tr>
    <tr><td>bbbbbbbb</td></tr>
</tbody>
</table>

and use this css rule to target either odd or even children:

table tr:nth-child(odd){
   background: pink;
}

Answered By - Bjorn.B