Эмуляция псевдо-селектора :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.
Смотрите также
Зеленый свет CSS-свойствам при верстке под IE8 и выше
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную ...
CSS-трюк: IE, таблица и "резиновые" изображения
Антон Молодой подкинул мне идею для этого поста. Он столкнулся с проблемой, с которой с моей косвенной помощью сам же и справился. Я с этим багом (да, речь пойдет об ...
10 фиксов, решающих проблемы Internet Explorer 6
Данный пост основан на переводе интересной англоязычной статьи «10 Fixes That Solve IE6 Problems«. Информация, изложенная ниже, будет полезна как начинающим верстальщикам, там и бывалым. Зеленым цветом я пометил пункты, ...
"Резиновая" ширина колонок + эмуляция высоты
Крайне редко мне доводится верстать полностью резиновые макеты, т.е. когда требуется «резиновая» ширина не только для самой страницы, но и для всех колонок (как правило, боковые колонки на моей практике ...
Комментарии (13)
ну и хрень
лучше продолжу использовать jq и дописывать вменяемые js строчки для nth-child
А если такой вариант:
li { background: #ccc; }
li + li { background: #eee; }
li + li + li { background: #ccc; }
li + li + li + li { background: #eee; }
…
Можно и так.
li { background: #ccc; }
li + li { background: #eee; }
li + li + li { background: #ccc; }
li + li + li + li { background: #eee; }
не совсем правильный вариант.
Вот конкретный пример того, почему :nth-child
http://jsfiddle.net/paffffff/xNuym/
Хм … Это жестяная жесть. А как насчёт selectvizr?
Сурово :)
Я вообще стал уходить от формата вывода подобного «автоматом» и писать в, например, в сайдбаре прямой хтмл код, т.е адрес + текст (не путем php-функции короче), скажем, рубрик вручную. Да, первый раз довольно лениво, но, в общем-то, «вбил и забыл» (c), так что ради зебры можно потратить на 10 мин больше чем обычно.
Получается нечто типа тасовки аля «polosa1, polosa2», что конечно несколько муторно и странно, но зато просто и вроде кроссбраузерно:
При этом, естественно, бекграунд просто тасует цвет за счет разных стилей в css и выдает нечто типа: http://clip2net.com/clip/m10803/1318377585-clip-32kb.png .
ЗЫ: Сорри, если странно написал. Ночь на дворе :)
для прайса с числом строк over 5000 файл стилей будет объемным )) Хорошо что есть возможность изменять код и шаблонизатор smarty дает возможности без js делать зёбру
имхо это еще хуже ,чем каждой строчке класс прописывать. но возможно где-то и и меет смысл.
я для себя вывел в свое время такие варианты:
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.
Признаться такой способ уж очень много тянет за собой недостатков при динамическом кол-ве данных. К примеру нужно подсветить каждую 6 строку из 200 — это ж будет полное безобразие :) На мой взгляд он хорошо подходит для замены :first-child и :last-child в младших версиях ИЕ путём прописания p{…} и p+p{…} А в данном случае применение нецелесообразно. Использую jQuery версию — рулит :)
С каких это пор IE7-8 стал поддерживать first/last -child?
Про last-child и слова нет. А first-child всегда поддерживался. Проверяй, прежде, чем писать.
Спасибо за статью!