Can You Create a Chessboard with Pure CSS and No Classes or IDs?

Pure CSS Chessboard Creation: Divs, No Classes or IDs

In the realm of pure CSS artistry, a common challenge arises: how to construct intricate layouts without resorting to classes or IDs. One curious puzzle in this realm is creating a chessboard using only divs, with no classes or IDs.

This particular task has puzzled aspiring CSS wizards for days, enticing them to explore the realms of nth-child() and its variations. However, no solution seemed to materialize.

So, is it possible to achieve this elusive design feat?

Interestingly, while a chessboard can be rendered using divs without classes or IDs, it may be better suited for expression as a table. This provides more accessibility for screen readers, allowing them to clearly convey the positions of figures on the board.

Consider the following CSS snippet:

<code class="css">table tr:nth-child(odd) td:nth-child(even) {
  background: #000;
}
table tr:nth-child(even) td:nth-child(odd) {
  background: #000;
}</code>

This CSS effectively creates a chessboard pattern within a table structure. By alternating the background colors of odd and even rows and columns, the familiar checkered pattern emerges.

Here's a demonstration on JSFiddle:

<code class="html"><table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table></code>

The above is the detailed content of Can You Create a Chessboard with Pure CSS and No Classes or IDs?. For more information, please follow other related articles on the PHP Chinese website!