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);
}
2010 Lynx Chrome Opera IE Camino SeaMonkey Firefox Safari Maxthon Lunascape NetSurf Iron
Jan 4.0 3.6 4.0
Feb
Mar 10.50
Apr 6.1.1 2.5
May 5.0
Jun 4.1, 5.0 5.0
Jul 10.60 6.2
Aug 3.0 6.3
Sep 6.0 2.6 6.0
Oct 7.0 7.0
Nov
Dec 8.0 11.0 8.0
2011 Lynx Chrome Opera IE Camino SeaMonkey Firefox Safari Maxthon Lunascape NetSurf Iron
Jan 6.4.1
Feb 9.0 9.0
Mar 10.0 9.0 4.0 10.0
Apr 11.0 11.10 2.7
May 6.5 11.0
June 12.0 11.50 2.1 5.0 3.1
July 2.2 5.1 12.0
Aug 13.0 6.0 13.0
Sep 14.0 2.4 7.0 2.8 14.0
Oct 15.0 3.2
Nov 2.1 2.5 8.0 15.0
Dec 16.0 11.60 2.6 9.0 3.3
2012 Lynx Chrome Opera IE Camino SeaMonkey Firefox Safari Maxthon Lunascape NetSurf Iron
Jan 2.7 10.0
Feb 17.0
Mar 18.0 2.1.2 2.8 11.0
Apr 2.9 12.0 6.7.0 2.9 18.0
May 19.0 19.0
June 12.00 2.10 13.0 3.4
July 20.0 2.11 14.0 6.0 20.0
Aug 21.0 2.12 15.0 21.0
Sep 22.0 6.8.0
Oct 10.0 2.13 16.0 22.0
Nov 23.0 12.10 2.14 17.0 3.5 23.0
Dec 4.0
2013 Lynx Chrome Opera IE SeaMonkey Firefox Safari Maxthon Lunascape NetSurf Iron
Jan 24.0 2.15 18.0 24.0
Feb 25.0 2.16 19.0 6.8.2
Mar 26.0 25.0
Apr 12.15 2.17 20.0 3.0 26.0
May 27.0 21.0 6.8.4 27.0
June 10.0.6 22.0 6.0.5 4.1
July 28.0 15.0 2.19 28.0
Aug 29.0 2.20 23.0 6.8.8
Sep 16.0 2.21 24.0 29.0
Oct 30.0 17.0 11.0 2.22 25.0 7.0 30.0
Nov 31.0 18.0 4.2
Dec 2.23 26.0 6.8.10 31.0
2014 Lynx Chrome Opera IE SeaMonkey Firefox Safari Maxthon Lunascape NetSurf Iron
Jan 32.0 19.0 32.0
Feb 2.8.8 33.0 2.24 27.0 4.3
Mar 20.0 2.25 28.0 33.0
Apr 34.0 29.0 4.4
May 35.0

Tags: