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>
