CSS nth-child apply odd-even rule but switch every 4 items

Question

I have a list of divs that appear 4 in a row with a class and I would like to create a checkerboard background style, meaning:

• Apply a different

Answer 1

Demo

http://jsfiddle.net/mykhA/1/

HTML

    

    

    

    

​

CSS

.container {
    width: 100px;
    height: 100px;
}

.line {
    width: 100px;
    height: 25px;
}

.box {
    width: 25px;
    height: 25px;
    float: left;
}

.box:nth-child(8n+2) {
    background-color: red;
}

.box:nth-child(8n+4) {
    background-color: red;
}
.box:nth-child(8n+5) {
    background-color: red;
}

.box:nth-child(8n+7) {
    background-color: red;
}

.box:nth-child(8n+1) {
    background-color: blue;
}

.box:nth-child(8n+3) {
    background-color: blue;
}

.box:nth-child(8n+6) {
    background-color: blue;
}

.box:nth-child(8n) {
    background-color: blue;
}
​

​