Удалить границу из последнего элемента списка навигации

Question

Я пытаюсь завершить список навигации, который содержится в div.

У меня есть установленная граница справа от каждого элемента, чтобы пробежать каждый элемент. Я хочу, чтобы эта граница была только на средних элементах, а не на последнем элементе.

HTML:

<div id="container-navigation"> 
    <ul id="navigation"> 
     <li><a href="index.html" target="_self">home</a></li> 
     <li><a href="aboutus.html" target="_self">about</a></li> 
     <li><a href="solutions.html" target="_self">solutions</a></li> 
     <li><a href="training.html" target="_self">training</a></li> 
     <li><a href="payments.html" target="_blank">payments</a></li> 
     <li><a href="contact.html" target="_self">contact</a></li> 
    </ul> 
</div> 

CSS:

#navigation li a { 
    color: #ffffff; 
    line-height: 22px; 
    font-size: 11px; 
    text-decoration: none; 
    padding: 5px 15px 6px 15px; 
    border-right: 1px solid #ffffff; 
} 

Что бы быть лучшим способом для достижения этой цели? Дайте последнему элементу уникальный класс и создайте еще одну запись CSS?

Answer 1

Попробуйте: селектор последнего ребенка, простой способ.

#navigation li a:last-child { 
    border-right: none; 
} 

Answer 2

Если бы это было, я бы перейти границу влево, а не вправо:

#navigation li a { 
    border-left: 1px solid #ffffff; 
} 

И тогда я хотел бы использовать first-child, как это имеет хорошую совместимость кросс-браузер.

#navigation li:first-child a { 
    border-left: 0 none; 
} 

Answer 3

Как полагает thgaskell, вот один из способов сделать это:

#navigation li a { 
    color: green; 
    line-height: 22px; 
    font-size: 11px; 
    text-decoration: none; 
    padding: 5px 15px 6px 15px; 
    border-right: 1px solid red; 
} 
#navigation li:last-child a { 
    border-right: none; 
} 

Демо по адресу: http://jsfiddle.net/audetwebdesign/G3mD9/

Примечание:last-child псевдо-класс поддерживается для IE9 +, так немного больше, чем first-child, что хорошо для IE7 +.

Answer 4

Если вам нужно поддерживать старые браузеры (IE7 + и т. Д.), Вы должны перевернуть границу с правой стороны на левую сторону, чтобы вы могли использовать селектор css first-child.

Измените текущий CSS от этого:

#navigation li a { 
    color: #ffffff; 
    line-height: 22px; 
    font-size: 11px; 
    text-decoration: none; 
    padding: 5px 15px 6px 15px; 
    border-right: 1px solid #ffffff; 
} 

To:

#navigation li a { 
    color: #ffffff; 
    line-height: 22px; 
    font-size: 11px; 
    text-decoration: none; 
    padding: 5px 15px 6px 15px; 
    border-left: 1px solid #ffffff; 
} 

#navigation li:first-child a { 
    border-left: none; 
} 

EXAMPLE FIDDLE

Answer 5

Создать новый идентификатор или имя класса для последнего элемента списка, затем дать стиль, как, что ,

#id_name a { border-right:none !important; } 

Answer 6

В качестве альтернативы: первому ребенку вы также можете использовать соседний селектор, чтобы получить поддержку IE7 +. Тем не менее, он нуждается в переходе к границе слева и справа от границы.

#navigation li a { 
    color: #ffffff; 
    line-height: 22px; 
    font-size: 11px; 
    text-decoration: none; 
    padding: 5px 15px 6px 15px; 
} 
#navigation li + li a { 
    border-left: 1px solid #ffffff; 
}