How about a game of CSS chess?

There are some new CSS selectors which let you cleanup your HTML from unwanted classes. One of them is :nth-child which let you make a chess board with not a single trace of JaveScript and no classes in table cells. I write this in present tense, but as I wrote before - many CSS selectors and other neat stuff is missing in IE8. Please install updates or different browsers to your friends and neighbors. You can track your progress on IE8 countdown page ;-).

Checkers

And now back to our friendly game of chess... or checkers. Here is a 8x8 table with chess pawns (Unicode characters).

/* general style */
table.board td {
    font-size: 2em;
    width: 1.5em;
    height: 1.5em;
    box-sizing: border-box;
}
/* even, odd row */
table.board tr:nth-child(2n) td:nth-child(2n),
table.board tr:nth-child(2n+1) td:nth-child(2n+1) {
    background-color:rgba(0,0,0, 0.5);
}

Big tables

And here is more daily use of :nth-child - big tables. Below is just a part of the table available on the Wikipedia Timeline of web browsers article.

/* headings */
table.bigdata th {
    background-color:rgba(255,255,255, 0.5);
}
/* even rows and every 3rd column starting at 2nd */
table.bigdata tr:nth-child(2n) td,
table.bigdata tr td:nth-child(3n-1) {
    background-color:rgba(0,0,0, 0.05);
}
/* crossing */
table.bigdata tr:nth-child(2n) td:nth-child(3n-1) {
    background-color:rgba(0,0,0, 0.1);
}