Я уверен, что многие из вас тоже задавались вопросом: как убрать последний разделитель у горизонтального меню. Обычно в CSS для разделения пунктов горизонтального меню задают правый вертикальный бордер толщиной в 1 пиксель:

.nav li {
border-right: 1px solid #333;
}

Понятно, что этот бордер появится у всех пунктов меню. В том числе и у последнего, что явно выглядит как-то бестолково:

Чтобы от него избавиться, можно применить парочку трюков CSS.

Убрать последний разделитель у горизонтального меню | Вариант 1

В правилах для пунктов списка li добавим вот такую фишку:

.nav li {
border-right: 1px solid #333;
}
.nav li:last-child {
border-right: none;
}

Здесь мы применили специальный селектор :last-child для отмены стиля, ранее объявленного в родительском селекторе.

Совсем другое дело:

Однако это не самый лучший метод, т.к. он заставляет браузер делать двойную работу — сначала назначить стиль, а затем его отменить. Лучше воспользоваться другим способом, более продвинутым:

Убрать последний разделитель у горизонтального меню | Вариант 2

В правилах для пунктов списка li запишем следующее:

.nav li:not(:last-child) {
border-right: 1px solid #333;
}

Здесь мы применили псевдо-класс :not() и сократили запись до одного объявления вместо двух. Такая запись говорит: применить правый бордер для всех пунктов, кроме последнего. Красиво и лаконично!

Ну и на закуску. Вы наверное уже и сами догадались, что раз есть псевдокласс :last-child, то должен быть и противоположный — :first-child. Все верно. Этот псевдокласс задает стилевое оформление первому дочернему элементу своего родителя. Иногда удобнее пользоваться им. Например, если у вас в меню первым стоит не текстовая ссылка, а картинка:

Здесь применено правило:

#header_menu li:first-child {
border-left: #E5E5E5 solid 1px;;
}

Enjoy! :{)

Автор: Игорь Квентор
www.websovet.com