Полосатая таблица в стиле зебры средствами CSS

Дорогие друзья, как бы это не звучала, но, будучи консерватором, я не отказываюсь от использования всего нового. Уж очень велик соблазн, сделать то, что работало где угодно и как угодно, несколько иначе, даже если это будет работать для узкого круга передовых товарищей.

В этой статья я расскажу вам о том, как вам можно оформить любой набор HTML-элементов в стиле зебры средствами CSS, т.е. когда чередуются светлая и темная строки, а в результате получается полосатая таблица. На счет полосатой таблицы это я к тому, что именно её я буду создавать в качестве примера, а вы уж смотрите сами.

И так, в большинстве случаев для создания полосатой таблицы нам приходилось использовать сторонние средства, вроде PHP или того же JavaScript. При этом, существовал некий маркер, который позволял присвоить соответствующей строке нужный фоновый цвет, например:

$marker = false;
foreach ( $items as $item ) {
  $marker = !$marker;
  echo '<tr bgcolor="'. ( $marker ? '#ffffff' : '#c0c0c0' ) .'">';
  /* и т.д. */
}

Нужно ли объяснять что тут да как? Знающим PHP и иже не составит труда понять логику данного кода, а остальным придется поверить мне на слово: это вполне себе работало! Проблемы в том, что все это требует прописать дополнительный код, что снижает общую читабельность и вообще… не комильфо. Как же быть?

На одном зарубежном блоге мне попался интересный пример работы с псевдоклассами even (четный) и odd (нечетный) средствами JavaScript библиотеки jQuery, например:

$(document).ready(function(){
  $("tr:even").addClass("even");
  $("tr:odd").addClass("odd");
});

Все просто, обрабатывается цикл элементов, и выбираются нужные из них. Проблема в том, что я не хотел использовать JavaScript в целом и jQuery в частности, а в CSS такая вольная трактовка не работает. Что работает в CSS?

В CSS для работы четными и нечетными элементами используется, достаточно продвинутый, псевдокласс nth-child. Кому интересно рекомендую почитать о нем, например, тут. Я же приведу свой пример:

.grid tr:nth-child(odd) {background: #def}
.grid tr:nth-child(even) {background: #fff}

В чём фишка и как оно работает? Начну с того, что класс grid присваевается тегу TABLE нужной таблицы, а с четом и нечетом мы уже разобрались ранее. Вот собственно у все. Кто не верит, может глянуть живой пример тут. Спасибо за внимание. Удачи!