Как я и обещал в одной из предыдущих статей, я расскажу про то, как можно изменить стиль только первого элемента списка. Когда я верстал дизайн для этого блога, мне захотелось сделать меню так, чтобы элементы были отделены друг от друга. Разделение я сделал так:

#menu ul li {
   border-top: 1px #000000 solid;
}

Хотя это и отрывок кода, но из него понятно, что над (top) каждым элементом LI списка UL будет рисоваться сплошная (solid) линия в 1 пиксель черного (#000000) цвета. Почему я выбрал именно border-top, ведь можно было бы сделать так, чтобы отделение было снизу? Да все очень просто: я, как дизайнер, решил, что для моего дизайна у последнего элемента снизу не должно быть линии  (если бы я написал border-bottom, то последний элемент был бы с чертой снизу). Таким образом, получится примерно так: Но поглядев, что получилось, мне захотелось убрать у первого элемента черту сверху. Раньше я просто переопределял стиль первого элемента помощью класса, примерно так:

<ul>
   <li class=”FirstItem”>Элемент 1</li>
   <li>Элемент 2</li>
   <li>Элемент 3</li>
</ul>

А в CSS добавлял:

.FirstItem {
   border: none;
}

И все отлично работало, но появлялся лишний код в HTML и приходилось вручную его добавлять и именно в первый элемент. А если вдруг перед первым нужно будет добавить еще один элемент? Неудобно, в общем. Я нашел выход намного проще. Оказывается в CSS можно просто указать стиль для первого элемента меню:

#menu ul li:first-child { }

Вот тут-то мы и определяем стиль первого элемента. Таким же образом я поступил при разработке дизайна для строительной фирмы Камелот (см. верхнее горизонтальное меню). Пользуйтесь, если не знали!