Эмуляция псевдо-селектора :nth-child() в IE7 и IE8

Неоднократно при верстке сайтов мне приходилось сталкиваться с ситуацией, когда строки в таблице или пункты вертикального списка необходимо было оформить зеброй. Т.е. одна строка, к примеру, с белым фоном, вторая с серым, третья опять с белым и так далее.

При этом часто нет возможности изменить html-код (например, при использовании виджетов WordPress), чтобы каждому четному или нечетному элементу добавить CSS-класс, через который и менять оформление.

Выхода в таком случае только два: использовать либо JavaScript, либо CSS.

Лично для меня использование JavaScript в качестве решения данной задачи не желательно. В CSS же есть специальное свойство :nth-child(), с помощью которого можно сделать оформление зеброй, однако при этом существует загвоздка — с данным свойством не знакомы версии Internet Explorer ниже 9-й, а 8-ю и 7-ю версию пока еще нужно учитывать при верстке.

Решение задачи нашлось, хоть оно, к сожалению, и не панацея.

Путем применения хитрого селектора с использованием псевдо-селектора :first-child, который IE7 и IE8 как раз-таки понимают, можно получить в этих браузерах эмуляцию :nth-child():

li:first-child + * {background: #EEE}

Можете посмотреть пример в виде списка и таблицы.

Однако, при этом имеется и один недостаток — для каждой следующей, к примеру, четной строки придется дублировать и дописывать вышеуказанный селектор. Т.е., чтобы сделать 2-й и 4-й пункт в списке с серым фоном, нужно применить такой CSS:

li:first-child + *,
li:first-child + * + * + * {
	background: #EEE;
}

А одновременно для 2-го, 4-го и 6-го пункта CSS будет уже таким:

li:first-child + *,
li:first-child + * + * + *,
li:first-child + * + * + * + * + * {
	background: #EEE;
}

И так по аналогии для следующих пунктов. Т.е., чем больше пунктов в списке, тем больше будет CSS-код.

Исходя из вышесказанного, можно сделать вывод, что данное решение имеет смысл использовать лишь в том случае, если вам заранее известно примерное количество пунктов в списке, и если этих пунктов немного. В обратном случае, получается, что разумнее будет все-таки задействовать JavaScript.

* * *

На сайте ChinaPad.ru читайте обзоры китайских планшетов, аналогов популярного iPad. Они работают как на OC Windows, так и на Android.