nth-child for every two table rows
Solution 1:
Realize that you are doing groups of 4, then you can see that you can have every 4th element and every 4th element minus one being white, then every 4th element minus two, or every 4th element minus 3 being grey.
So, you'd use 4n
and 4n-1
, then 4n-2
and 4n-3
:
div:nth-child(4n), div:nth-child(4n-1) {
background: red;
}
div:nth-child(4n-2), div:nth-child(4n-3) {
background: blue;
}
That code isn't precise to your case, I wrote it for a jsFiddle proof-of-concept.
NB disclaimer: Keep in mind that nth-child
does not work in IE8. Typical issue, of course.
Solution 2:
Here's what I'm using to right-align the first column of each table.
table td:nth-child(2n-1) {
align: right;
text-align: right;
}