Главная/ HTML и CSS приемы | Обходим баги, находим интересные решения/ Navigation/ Как избавиться от дополнительного класса для первого элемента

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

Дата публикации: 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), доля на рынке которого стремительно снижается, считаю в корне не верной. Ничего страшного, если у небольшого процента пользователей, которые еще не обновили браузер, сайт будет работать незаметно медленнее.

Теги: навигация