Убираем класс для первого элемента
Дата публикации: 18.08.2009
К примеру, имеется меню вида:
Данное меню имеет разделители, между пунктами меню.
Многие для этого применяют следующий код:
<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), доля на рынке которого стремительно снижается, считаю в корне не верной. Ничего страшного, если у небольшого процента пользователей, которые еще не обновили браузер, сайт будет работать незаметно медленнее.
- в боевых условиях используйте условные комментарии вместо хака для IE6
- псевдокласс :first-child
- псевдокласс :first-child для 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 больше на величину отрицательного отступа, чтобы выровнять визуальное расстояние между пунктами меню и границами */
}
Демо пример. Проверено:
Данный вариант не подойдет для случая с выпадающими подменю.