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

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

Комментарии (12)
  1. 1

    ну и хрень

    лучше продолжу использовать jq и дописывать вменяемые js строчки для nth-child

  2. 2
    Xtray

    А если такой вариант:

    li { background: #ccc; }
    li + li { background: #eee; }
    li + li + li { background: #ccc; }
    li + li + li + li { background: #eee; }

  3. 5

    Хм … Это жестяная жесть. А как насчёт selectvizr?

  4. 6

    Сурово :)
    Я вообще стал уходить от формата вывода подобного «автоматом» и писать в, например, в сайдбаре прямой хтмл код, т.е адрес + текст (не путем php-функции короче), скажем, рубрик вручную. Да, первый раз довольно лениво, но, в общем-то, «вбил и забыл» (c), так что ради зебры можно потратить на 10 мин больше чем обычно.

    Получается нечто типа тасовки аля «polosa1, polosa2», что конечно несколько муторно и странно, но зато просто и вроде кроссбраузерно:

    <li><a class="polosa1" href="http://ссылко.ru">текст</a></li>
    <li><a class="polosa2" href="http://ссылко2.ru">текст2</a></li>
    

    При этом, естественно, бекграунд просто тасует цвет за счет разных стилей в css и выдает нечто типа: http://clip2net.com/clip/m10803/1318377585-clip-32kb.png .

    ЗЫ: Сорри, если странно написал. Ночь на дворе :)

  5. 7
    mdss

    для прайса с числом строк over 5000 файл стилей будет объемным )) Хорошо что есть возможность изменять код и шаблонизатор smarty дает возможности без js делать зёбру

  6. 8
    vlad43

    имхо это еще хуже ,чем каждой строчке класс прописывать. но возможно где-то и и меет смысл.
    я для себя вывел в свое время такие варианты:
    1) для норм браузеров — nth-child

    2) для IE<8 через expressions:
    table tr { z-index: expression(runtimeStyle.zIndex = 1, this.rowIndex % 2 == 0 ? (className +='t_line2') : null);}

    3) для ie8 -jQ типа такого:
    $('table.highlight tr:nth-child(2n+1)').addClass('odd');

    Но если уж используем (3), то (2) можно выкинуть - оно и логичнее.
    Либо переводим IE8 через x-ua в семерку ипользуем метод(2).
    Но это как-то бестолково, по идее.

    Вот и выходит, что без JQ тут почти никак.

    Есть еще такой вариант:

    НО в IE 8 не пашет тк expression там нет. Итого остается только JQ!

  7. 10

    Признаться такой способ уж очень много тянет за собой недостатков при динамическом кол-ве данных. К примеру нужно подсветить каждую 6 строку из 200 — это ж будет полное безобразие :) На мой взгляд он хорошо подходит для замены :first-child и :last-child в младших версиях ИЕ путём прописания p{…} и p+p{…} А в данном случае применение нецелесообразно. Использую jQuery версию — рулит :)

  8. 11
    Eugene

    С каких это пор IE7-8 стал поддерживать first/last -child?