You can always simplify your selectors like this:
div {
width:1em;height:1em;
float:left;
background:#ecf0f1;
border:1px solid #3498db;
}
div:nth-child(10n+1), div:nth-child(10n+4), div:nth-child(10n+5), div:nth-child(10n+6), div:nth-child(10n+8) {
background:#3498db;
border:1px solid #ecf0f1;
}
body {width:1012px;}
What I did was:
- set the white-ish style as the default
- let the others override this style
This way you can eliminate 5 selectors without increasing code.
Also as posted by another user in comments (nicolallias) and as per the OP request, I will also add the way to shorten it with more javascript code:
for(var i = 0; i < 1000; i++){
switch(i%10){
case 1:
case 4:
case 5:
case 6:
case 8:
$('body').prepend('<div class="one"></div>'); break;
case 2:
case 3:
case 7:
case 9:
case 0:
$('body').prepend('<div class="two"></div>'); break;
}
}
.one {
background:#3498db;
border:1px solid #ecf0f1;
}
.two {
background:#ecf0f1;
border:1px solid #3498db;
}