Pure css Chessboard with div & no classes or ids, is it possible?
This is an interesting problem. I think a chess board is better expressed as a table than as a series of divs, as a screen reader would dictate the rows and columns where the figures are located. With a table:
table tr:nth-child(odd) td:nth-child(even) {
background: #000;
}
table tr:nth-child(even) td:nth-child(odd) {
background: #000;
}
http://jsfiddle.net/9kWJZ/
You don't have to hardcode each :nth-child()
. Here's one way to shorten it. Each selector corresponds to a row on the chessboard:
#chess div:nth-child(-2n+8),
#chess div:nth-child(8) ~ div:nth-child(-2n+15),
#chess div:nth-child(16) ~ div:nth-child(-2n+24),
#chess div:nth-child(24) ~ div:nth-child(-2n+31),
#chess div:nth-child(32) ~ div:nth-child(-2n+40),
#chess div:nth-child(40) ~ div:nth-child(-2n+47),
#chess div:nth-child(48) ~ div:nth-child(-2n+56),
#chess div:nth-child(56) ~ div:nth-child(-2n+63) {
background-color: #000;
}
jsFiddle preview