Jeffrey Jeffrey - 5 months ago 23
CSS Question

CSS :before and :first-child combined

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

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.

Comments