Убираем класс для первого элемента

Подготовил: Евгений Рыжков Дата публикации: 18.08.2009
Последнее обновление: 22.02.2011

К примеру, имеется меню вида:
пример меню с разделителями
Данное меню имеет разделители, между пунктами меню.

Многие для этого применяют следующий код:

<ul>
<li class="first"><a href="#">Home page</a></li>
<li><a href="#">About company</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Contacts</a></li>
</ul>

CSS:

ul {
padding-top: 10px;
}
ul li {
display: inline;
margin-left: 10px;
border-left: 1px solid #000;
padding-left: 10px;
}
li a {
color: #0000FF;
}
.first {
border: none;
}

Недостатки подобного кода:

  • программистам придется учитывать особенности навигации, ставить дополнительное условие, которое будет определять первый элемент навигации и добавлять ему нужный класс (это ведет к усложнению программного кода и дополнительным временным затратам на программирование)
  • немного усложнялся HTML код, за счет дополнительного класса

Задача

Избавиться от дополнительного класса first. Для этого достаточно применить свойство CSS3 first-child:

<ul>
<li><a href="#">Home page</a></li>
<li><a href="#">About company</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Contacts</a></li>
</ul>

CSS:

ul {
padding-top: 10px;
}
ul li {
display: inline;
margin-left: 10px;
border-left: 1px solid #000;
padding-left: 10px;
}
li a {
color: #00F;
}
li:first-child, .first-child {
border: none;
}
* html li {

z-index: expression( /* оптимизированный expression, который сработает только при загрузке страницы */
runtimeStyle.zIndex = 1,
this == parentNode.firstChild ? (className += " first-child") : 0 /* добавляем нужный класс первому элементу */
)
}

Результат.Проверено в:

Заметки

Некоторые могу заявить, что expression — это зло, которого стоит избегать. Отчасти это верно, но усложнять код и работу команды из-за одного браузера (IE6), доля на рынке которого стремительно снижается, считаю в корне не верной. Ничего страшного, если у небольшого процента пользователей, которые еще не обновили браузер, сайт будет работать незаметно медленнее.

Вариант 2

update by SooR 16.09.2010 избавится от дополнительного класса можно так же используя сестринский селектор:

ul li {
	display: inline;
	margin-left: 10px;
}
li a {
	color: #0000FF;
}
li+li {
	border-left: 1px solid #000;
	padding-left: 10px;	
}

Для IE6 как обычно требуется помощь:

.li {
	border-left: 1px solid #000;
	padding-left: 10px;	
}
ul li {
  z-index: expression(
  runtimeStyle.zIndex = 1,
  previousSibling && previousSibling.tagName && "li" == previousSibling.tagName.toLowerCase() ? (className += " li") : 0);
}

Демо пример. Проверено:

Вариант 3

update 28.02.11 by Tosha В случае когда нужно избавится от бордюра для первого элемента, можно обойтись без expression для IE:

ul {
	margin-left: 1px; /* толщина бордюра от которого нужно избавится */
	overflow: hidden;
	zoom: 1; /* таблетка для IE */
}
ul li {
	display: inline;
	border-left: 1px solid #000;
	margin-left: -1px; /* отрицательный отступ поможет скрыть первый бордюр */
	margin-right: 10px;
	padding-left: 11px; /* padding больше на величину отрицательного отступа, чтобы выровнять визуальное расстояние между пунктами меню и границами */
}

Демо пример. Проверено:

Данный вариант не подойдет для случая с выпадающими подменю.

Показать комментарии