CSS Nth-Child Checkered [closed]

Answer 1

Not sure if it's the most elegant solution to your problem, but using div to group div in row, I was able to sort the odd and even row, and apply style to their odd or even child.

Take a look here : http://jsfiddle.net/3ASE8/

#div_parent {
    width: 500px;
}
.child {
    display: inline-block;
    margin: 5px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: #333;
    color: red;
}

.row:nth-child(odd) .child:nth-child(even) {
 background-color: #ccc!important;    
}
.row:nth-child(even) .child:nth-child(odd) {
 background-color: #ccc!important;    
}

Answer 2

You could use :even and :odd, in this case:

div:nth-child(even) {
    background-color:grey;
}

div:nth-child(odd) {
    background-color:black;
}

jsFiddle here

Answer 3

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!

Answer 4

Since it's a repeating pattern over 8 elements, you can use that to create the CSS:

div:nth-child(8n+1),
div:nth-child(8n+3),
div:nth-child(8n+6),
div:nth-child(8n) {
    background-color:black
}
div:nth-child(8n+2),
div:nth-child(8n+4),
div:nth-child(8n+5),
div:nth-child(8n+7) {
    background-color:gray
}

Fiddle: http://jsfiddle.net/RvbsL/2/