Как убрать последний разделитель у горизонтального меню

Как убрать последний разделитель у горизонтального меню

Я уверен, что многие из вас тоже задавались вопросом: как убрать последний разделитель у горизонтального меню. Обычно в 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! :{)

Пожалуйста, оцените статью и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (13 votes, average: 5,00 out of 5)
Загрузка...

Похожие записи:

2 комментария

  1. Felix | 19.07.2017

    .nav li + li {
    border-left: 1px solid #333;
    }
    Делает то же самое, что и в примере, только одним блоком кода.

  2. Игорь Квентор | 19.07.2017

    Верно! Как и .nav li:first-child ~ li. Просто :not() более наглядно, имхо.

Оставить комментарий: