Убираем класс для первого элемента
Дата публикации: 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: #0000FF;
}
li first-child, .first {
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
Теги: навигация