Let's turn a boring <table> into a fancy chessboard! In this challenge we'll cover the nth-of-type selector to make it easy to style every other square.
0% complete
Loading editor...
<table id="chessboard">
<tr id="row-8">
<td id="square-a"></td>
<td id="square-b"></td>
<td id="square-c"></td>
<td id="square-d"></td>
<td id="square-e"></td>
<td id="square-f"></td>
<td id="square-g"></td>
<td id="square-h"></td>
</tr>
<tr id="row-7">
<td id="square-a"></td>
<td id="square-b"></td>
<td id="square-c"></td>
<td id="square-d"></td>
<td id="square-e"></td>
<td id="square-f"></td>
<td id="square-g"></td>
<td id="square-h"></td>
</tr>
<tr id="row-6">
<td id="square-a"></td>
<td id="square-b"></td>
<td id="square-c"></td>
<td id="square-d"></td>
<td id="square-e"></td>
<td id="square-f"></td>
<td id="square-g"></td>
<td id="square-h"></td>
</tr>
<tr id="row-5">
<td id="square-a"></td>
<td id="square-b"></td>
<td id="square-c"></td>
<td id="square-d"></td>
<td id="square-e"></td>
<td id="square-f"></td>
<td id="square-g"></td>
<td id="square-h"></td>
</tr>
<tr id="row-4">
<td id="square-a"></td>
<td id="square-b"></td>
<td id="square-c"></td>
<td id="square-d"></td>
<td id="square-e"></td>
<td id="square-f"></td>
<td id="square-g"></td>
<td id="square-h"></td>
</tr>
<tr id="row-3">
<td id="square-a"></td>
<td id="square-b"></td>
<td id="square-c"></td>
<td id="square-d"></td>
<td id="square-e"></td>
<td id="square-f"></td>
<td id="square-g"></td>
<td id="square-h"></td>
</tr>
<tr id="row-2">
<td id="square-a"></td>
<td id="square-b"></td>
<td id="square-c"></td>
<td id="square-d"></td>
<td id="square-e"></td>
<td id="square-f"></td>
<td id="square-g"></td>
<td id="square-h"></td>
</tr>
<tr id="row-1">
<td id="square-a"></td>
<td id="square-b"></td>
<td id="square-c"></td>
<td id="square-d"></td>
<td id="square-e"></td>
<td id="square-f"></td>
<td id="square-g"></td>
<td id="square-h"></td>
</tr>
</table>
Loading editor...