Как скрыть последний элемент (last-child)?

Question

[Martyer]

Вот кусок кода меню

#main-navigation {
	height: 35px;
	}
#main-navigation li a {
	padding: 0 5px;
	color: #fff;
	font-size: 11px;
	line-height: 35px;
	letter-spacing: 1px;
        border-right: 1px solid #000;
	}
#main-navigation .sf-menu > ul > li:after {
	width: 6px;
	float: left;
	margin-top: 16px;
	display: block;
	color: #e6e6e6;
	font-size: 1.8em;
	}
#main-navigation  .sf-menu > ul > li:last-child:after  {
	display: none;
	}

Уж больно всё запутанно там, это только 1/30 всего кода для меню, но вроде скинул тот что нужен)
В #main-navigation li a я задал бордюры справа, а как сделать чтобы последний приобретал свойство display: none? Есть вот эта строка: #main-navigation .sf-menu > ul > li:last-child:after, но либо она не работает, либо это вообще не то и по примеру составить не получилось.

Заранее благодарю за любые подсказки)

Answer 1

[Serj-One]

#main-navigation li:last-of-type a {
    border-right: none;
}

li:last-child:after - совсем мимо.

Comments

[Martyer]

Огромное спасибо за помощь, работает, правда с border-right: 0;

Answer 2

[Евгений Петров]

Для пополнения коллекции в зоопарке — можно не переопределять, а записать сразу как нужно:

Используем псевдокласс отрицания

#main-navigation li:not(:last-child) a {
	border-right: 1px dashed #39f;
}

Используем комбинатор ближайшего соседа

#main-navigation li + li a {
	border-right: 1px dashed #39f;
}

А ещё вам совет — используйте классы. Не полагайтесь на имя тэга.