Как заставить работать :last-child?

Question

[Дмитрий]

codepen.io/ueruxon/pen/KgyZVw
Не получается убрать границу у последнего элемента в списках (Contact). Хотя элемент последний. Вместо этого убирается у всех элементов span.

<div class="container clearfix">
				<ul class="navigation left">
					<li class="active"><span><a href="#">Portfolio</a></span></li>
					<li><span><a href="#">Services</a></span></li>
					<li><span><a href="#">Staff</a></span></li>
					<li><span><a href="#">Articles</a></span></li>
					<li><span><a href="#">Contact</a></span></li>
				</ul>
			</div>

.navigation li span {
	display: block;
	height: 11px;
	line-height: 11px;
	padding: 0 25px;
	border-right: 1px solid #767676;
}

.navigation li span:last-child {border-right: none;}

Нужно чтобы справа от Контакта не было бордера.

Answer 1

[Roman]

.navigation li:last-child span {border-right: none;}

Answer 2

[display: block]

Потому что .navigation li:last-child span
Сколько span'ов соседствуют с нашим span:last-child в li-родителе?

Comments

[Дмитрий]

Спасибо. Запутался. Я почему-то забыл что спан и так последний в ли, и подумал что выберет самый последний спан в последнем ли..