Nth-child для каждых двух строк таблицы

Мне нужно сделать каждые две строки моей таблицы серыми, и я предпочел бы использовать nth-child, если это возможно.

Я перепутал с nth-child tester Chris Coyier, но все еще не может его получить.

Мне нужна следующая формула:

1,2 - grey
3,4 - white
5,6 - grey
7,8 - white
9,10 - grey

и т.д. Я бы предпочел не класть класс в html, поскольку я уверен, что это будет предложение от некоторых. Если есть способ снять это с nth-child, то, что я ищу.

Ответы

Ответ 1

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

Итак, вы должны использовать 4n и 4n-1, затем 4n-2 и 4n-3:

div:nth-child(4n), div:nth-child(4n-1) {
    background: red;
}
div:nth-child(4n-2), div:nth-child(4n-3) {
    background: blue;
}

Этот код не является точным для вашего случая, я написал его для jsFiddle-доказательство концепции.

Отказ от ответственности NB: Имейте в виду, что nth-child не работает в IE8. Типичная проблема, конечно.

Ответ 2

Вот то, что я использую для выравнивания первого столбца каждой таблицы.

table td:nth-child(2n-1) {
    align: right;
    text-align: right;
}