I\'m using the following code to add separators between my menu items:
#navigation_center li:before {
content: \"| \";
color: #fff;
}
Try
#navigation_center li:first-child:before {
content: '';
}
Edit: I wanted to expand on this answer with comments made by FelipeAls. The original question used :first
which is not a valid CSS selector. Instead, use :first-child
. Also the order of the pseudo-selectors is important. The first child selector must come first.
I tend to think of :before
as a kind of modifier to a selector. It does not actually select an element only the space just before the selected element.
Although hradac's answer should do the trick i thought it would be best to run through some possible permutations to help newcommers.
.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>
Let's take this apart:
div.works
are inside a divdiv.broken
are also inside a divfirst-child
and then selecting the empty space right before it.first-child
definition, and then selects the empty space before them.:before:first-child
attempts to select an empty space, but then tests if it is a first-child
and it is not (since technically it's not yet in the DOM tree), the similar problem is with :not(:first-child)
.