CSS Nth-Child Checkered [closed]

Answer 1

This just doesn't appear to be possible - what you would need to do would be to use modulo to change the order in which the colors get applied depend on which row you're on, but you can only do addition or subtraction - explained here - nth-child with mod (or modulo) operator

Alternative solutions:

1. Wrap each "row" in a div so that you can select every other row separately to say gray should come first vs. black.
2. Use JS to loop through the elements where you can use modulus, and add a class to every other row and flip the way the background colors are applied.
3. Similar to 2, except just put the classes on the elements in the code before the page is loaded

EDIT: Just realized I was totally wrong, you could do this since it's a repeating pattern every 8 divs instead of every 4. Of course, before I could put a solution together, Andi beat me to the punch. Touche - nice work!