Xiper

Индивидуальные стили для li. Избавляемся от классов.

Автор: Александр Головко Дата публикации:

Давай представим список, каждый элемент которого наделен индивидуальными стилями, например, иконкой, размером и цветом шрифта. Пусть это будет список рейтингов:

список рейтингов

Идеальный HTML для такого случая будет выглядеть так:

<ul>
	<li>Первое место</li>
	<li>Второе место</li>
	<li>Третье место</li>
	<li>Четвертое место</li>
</ul>

Но можно ли такое сделать без классов? Наверное нет, если не знать про селектор сестринских элементов.

Решение

Как всегда в нашей жизни за все приходится расплачиваться. Чем проще и красивее HTML, тем, как правило, более громоздкий получается CSS. Но такой размен считаю вполне оправданным. Чистый и красивый HTML-код свидетельствует о высоком профессионализме верстальщика. Кроме того программист тебе скажет спасибо, да и поисковики не обидят.

Итак, используем селекторы сестринских элементов (стили относящиеся к цвету и виду шрифта я упускаю чтобы не загромождать пример):

li{
	font-size:38px;
	background:url(images/medals.png) no-repeat;
	padding-left:24px;
}
li+li{
	font-size:32px;
	background-position:0 -44px;
}
li+li+li{
	font-size:28px;
	background-position:0 -88px;
}
li+li+li+li{
	font-size:16px;
	background:none;
}

А как же IE6?

По старой доброй традиции для всех интересных фишек в IE6 нужны костыли. Ну не может дедушка самостоятельно передвигаться! Годы уже не те (да он и в молодости неважно бегал).

Так что для IE6 придется использовать компромиссное решение — добавлять классы в expression.

ul {
z-index: expression(
runtimeStyle.zIndex = 1,
function(node) {
	var list = node.childNodes, i = list.length;
		while(i--) {
                if(list[i].nodeType == 1) {
                    list[i].className = 'item-' + i;
                }
            }
        }(this));
)
}
.item-0 {
	font-size:38px;
}
.item-1 {
	font-size:32px;
	background-position:0 -44px;
}
.item-2 {
	font-size:28px;
	background-position:0 -88px;
}
.item-3 {
	font-size:16px;
	background:none;
}

Эту ужасную конструкцию прячем в отдельный CSS, подключаемый с помощью условных комментариев и дружно молимся, чтоб поскорее настали времена, когда ie6.css можно будет увидеть только в Национальном музее верстки в зале, посвященном извращениям пещерных верстальщиков.

Демо-пример.

Проверено в:

Само собой списками прием не ограничивается. Точно так же можно было бы применять оформление к абзацам или дивам.

Какие-то эти плюсики стремные! А можно без них?

Красивее можно было бы записать CSS, если использовать не селектор сестринских элементов, а псевдоселектор :nth-child.

При этом запись примет вид (картинки с медальками для краткости опустим):

	li:nth-child(1) {font-size: 38px;}
	li:nth-child(2) {font-size: 32px;}
	li:nth-child(3) {font-size: 28px;}
	li:nth-child(4) {font-size: 16px;}

Но, такой код ни за что не хочет понимать не только IE6, но и IE7-8! Также его не поймут ни Opera младше 9.5 ни FF младше 3.5. Поэтому если поддержка этих браузеров для тебя не важна, то да, можно обойтись и без плюсиков!

Где еще можно это применять?

Очень часто приходиться сталкиваться с иконками в списках, например, при верстке меню:

иконками в списках

А иногда бывает, что сами элементы меню выполнены в виде картинок. Тогда приходиться городить что-то типа:

<ul>
	<li class="menuAbout"><a href="#">О нас</a></li>
	<li class="menuProduction"><a href="#">Продукция</a></li>
	<li class="menuStaff"><a href="#">Сотрудники</a></li>
	<li class="menuContact"><a href="#">Контакты</a></li>
</ul>

Как удобно избавиться от всех этих классов! Тем не менее помни, что в такой ситуации гибкость страдает! Если пункты меню будут добавляться/убираться/меняться местами, необходимо будет подправлять и стили! С другой стороны, если каждому пункту прописан класс, то гибкости тут тоже не много. Не меняя CSS можно только переставить или удалить пункты.

Таким образом, оправданно ли применение данного приема, определяем индивидуально для каждого конкретного случая.

Материал

  • rotorweb :: Как добавить разные иконки к пунктам меню, используя только CSS