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

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?

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

The following approach makes use of the fact that the coloring pattern repeats every 16 squares (counting from top left to bottom right). So, the first rule #chess div:nth-child(16n+1) colors the squares 1,17,33 and 49 (in other words, "the first column"). This is repeated with additional rules for all colored squares from 3 to 16 each representing a separate column.

With the given markup, it doesn't matter if you use nth-of-type or nth-child, however with additional markup it might, so nth-child is kind of the more obvious choice.

for(i=0;i<64;i++){chess.appendChild(document.createElement("div"))}

#chess div{
     width:22px;height:22px;border:1px solid black;
     float:left; 
}

#chess div:nth-of-type(16n+16),
#chess div:nth-of-type(16n+14),
#chess div:nth-of-type(16n+12),
#chess div:nth-of-type(16n+10),
#chess div:nth-of-type(16n+7),
#chess div:nth-of-type(16n+5),
#chess div:nth-of-type(16n+3),
#chess div:nth-of-type(16n+1){   
    background-color:black;
}

#chess div:nth-of-type(8n+1){   
    clear:left;
}

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

In pure CSS, the accepted answer looks right - however, if you want to shorten this up with SCSS, you can do some maths:

#chess {
  div {
    background: #fff;
    /* even children on odd rows, odd children on even rows */
    @each $offset in 2 4 6 8 9 11 13 15 {
      &:nth-child(16n + #{$offset}) {
        background: #000;
      }
    }
  }
}

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

Related

Recent Posts