A może partyjkę szachów w CSS?

Istnieją nowe selektory CSS, które w szczególny sposób potrafią ułatwić życie programistów. Jednym z nich jest :nth-child, który pozwala stworzyć szachownicę bez jednej linijki JavaScript i bez żadnych klas w komórkach tabeli. Piszę „pozwala”, ale jak już pisałem na tej witrynie - wiele selektorów CSS i innych fajnych rzeczy nie może być użyte w IE8. Proszę zatem - zainstaluj aktualizację lub inną przeglądarkę swoim znajomym, sąsiadom oraz sąsiadkom. Możesz śledzić swoje postępy na wykresie upadku IE8 ;-).

Szachownica

A teraz wracamy do naszej partyjki szachów, czy może warcabów. Poniżej jest zwykła tabela 8x8 z odpowiednio ustawionymi stylami i pionkami (te pionki to zwykłe znaki w Unicodzie).

/* style ogólne */
table.board td {
    font-size: 2em;
    width: 1.5em;
    height: 1.5em;
    box-sizing: border-box;
}
/* parzyste i nieparzyste wiersze */
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);
}

Wielkie tabele

Schodząc ku nieco bardziej codziennym zastosowaniom :nth-child przechodzimy do dużych i wielkich tabel. Poniżej znajduje się sformatowany fragment tabeli dostępnej na anglojęzycznej Wikipedii z artykułu „Timeline of web browsers”.

/* nagłówki */
table.bigdata th {
    background-color:rgba(255,255,255, 0.5);
}
/* parzyste wiersze oraz co 3-cia kolumna poczynając od 2-ej */
table.bigdata tr:nth-child(2n) td,
table.bigdata tr td:nth-child(3n-1) {
    background-color:rgba(0,0,0, 0.05);
}
/* na przecięciu */
table.bigdata tr:nth-child(2n) td:nth-child(3n-1) {
    background-color:rgba(0,0,0, 0.1);
}