Search code examples
csspseudo-elementpseudo-class

Is it ok to use multiple pseudo-elements in css?

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?

Solution

  • 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.