CSS3/jQuery selector to style group of 2 rows via the :nt-child() selector

Question

I have a <table> that the data is separated per 2 <tr>'s

So i want to style the rows(each 2 rows) as zebra stripped, but each set of 2 should be styled.

I am trying something like:

 tr:nth-child(3n+1), tr:nth-child(4n+1){background:#f7f7f7;}

I would prefer a CSS3 solution, but if only jQuery can do it, that will be fine.

Please see demo here (editable via jsFiddle):

I tried to play around with css-tricks nth-child-tester, but i couldn't get it.

The question is how do i zebra style each set of (2) TR's (rows)

Answer 1

Would this work for you?

tbody tr:nth-child(4n+1){background:#f00;}
tbody tr:nth-child(4n+2){background:#f00;}
tbody tr:nth-child(4n+3){background:#0f0;}
tbody tr:nth-child(4n+4){background:#0f0;}

This will color pairs of rows alternating as red and green.

Answer 2

Here is a fork where every pair of rows is styled.

I had to edit the colour to see anything.

You need to use (4n+1) and (4n+2).

Answer 3

Either of these would work:

tr:nth-child(4n+1), tr:nth-child(4n+1)+tr {  }
tr:nth-child(4n+1), tr:nth-child(4n+2) {  }