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

Трюки CSS

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

Enjoy! :{)

19.07.2017

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

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

1 Star2 Stars3 Stars4 Stars5 Stars (9 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() более наглядно, имхо.

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