CSS: до и: с первым ребенком

Я использую следующий код для добавления разделителей между моими пунктами меню:

#navigation_center li:before {

    content: "| ";
    color: #fff;

}

Теперь я хочу, чтобы первый элемент не имел разделителя перед ним, поэтому я вычислил следующий код:

#navigation_center li:before:first-child {

    content: none;

}

но это ничего не делает. Можно ли комбинировать: before и: first-child?

Ответ 1

Попробуйте

#navigation_center li:first-child:before {
    content: '';
}

Изменить. Я хотел бы расширить этот ответ комментариями FelipeAls. В исходном вопросе используется :first, который не является допустимым селектором CSS. Вместо этого используйте :first-child. Важен также порядок псевдоселекторов. Первый дочерний селектор должен быть первым.

Я склонен думать о :before как о модификаторе для селектора. Он фактически не выбирает элемент только для пространства непосредственно перед выбранным элементом.

Ответ 2

Хотя hradac ответ должен сделать трюк, я подумал, что лучше всего запустить некоторые возможные перестановки, чтобы помочь новичкам.

.works:first-child:before
{
	color: green;
	content: 'working ';
}
.works:not(:first-child):after
{
	color: green;
	content: ' is working';
}


.broken:before:first-child
{
	color: red;
	content: 'this will never show up';
}
.broken:after:not(:first-child)
{
	color: red;
	content: 'and this will not show up either';
}

works:
<div>
	<div class='works'>
	 something
	</div>
	<div class='works'>
	 something
	</div>
	<div class='works'>
	 something
	</div>
</div>
<hr/>
broken:
<div>
	<div class='broken'>
	 something
	</div>
	<div class='broken'>
	 something
	</div>
	<div class='broken'>
	 something
	</div>
</div>