Question

I’m using the following code to add separators between my menu items:

#navigation_center li:before {

    content: "| ";
    color: #fff;

}

Now I want the first item not to have a separator in front of it, so I figured out the following code:

#navigation_center li:before:first-child {

    content: none;

}

but that’s not doing anything. Is it possible to combine :before and :first-child?

Answer 1

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.