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

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.

Answer 2

Here is the working fiddle: http://jsfiddle.net/surendraVsingh/zRrLF/

<ul>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>

</ul>​

CSS:

li:before{content:'. ';}
li:first-child:before{content:'@ ';}

Answer 3

Of course you can use pseudo classes.They are quite well supported from IE8 and up.You can check the compatibility of any pseudoclass you are going to use here http://caniuse.com/#search=after

If you don't want a dot just use empty commas in content and then display:block and also specify height and width.

menu li:before {
    content: "";

    display:block;
    width:50px;
    height:50px;
    background:red;

}