Главная CSS-верстка

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

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

При этом часто нет возможности изменить 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.

Комментарии (13)

  1. ну и хрень

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

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

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

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

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

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

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

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

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

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

  6. имхо это еще хуже, чем каждой строчке класс прописывать. но возможно где-то и и меет смысл.
    я для себя вывел в свое время такие варианты:
    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!

    • Спасибо за комментарий. Если на сайте уже используется jQuery, то я, конечно же, делаю, как в 3-м случае. Второй способ попробую задействовать в следующий раз, если нужно будет без jQuery.

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

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

  9. Спасибо за статью!

Ваш комментарий