Эмуляция псевдо-селектора :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.