Question

I want to make a menu where each item is separated with a ·. To achieve this I use

menu li:before {
    content: "· ";
}

This is swell, but it generates a dot before the first item as well. Therefore, i would like to use :first-child pseudo-class as well. Can I do this?

Answer 1

Sure you can – http://jsfiddle.net/WQBxk/

p:before {
    content: "BEFORE ";
    display: block;
}

p:first-child:before {
    content: "1ST";
    display: block
}
​

The bad – it won’t work in IE7 and below. Not because of the multiple pseudo selectors, but because of non-supported :before – http://kimblim.dk/css-tests/selectors/

Just tested in IE8 – works well.