html - Pure css Chessboard with div & no classes or ids, is it possible?

Question

I have the following layout

<div id="chess">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

Is it possible to make a chess board using only css and without changing the above html? That means no classes or ids. I've been searching for ideas an such for 2 days now. I tried with nth-child() and some variations but no success.

I am awfully curious if this can be done. It was given as an assignment to someone.

So please, any ideas?

Answer 1

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/