Можно ли использовать несколько псевдоэлементов в CSS?

Question

Я хочу сделать меню, где каждый элемент разделен ·. Для достижения этого я использую

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

Это хорошо, но также создает точку перед первым элементом. Поэтому я хотел бы использовать :first-child а также псевдокласс. Я могу это сделать?

Answer 1

Конечно, вы можете - http://jsfiddle.net/WQBxk/

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

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

Плохо - это не будет работать в IE7 и ниже. Не из-за множества псевдо-селекторов, а из-за неподдерживаемых :before - http://kimblim.dk/css-tests/selectors/

Только что протестировано в IE8 - работает хорошо.

Answer 2

Вот рабочая скрипка: 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

Конечно, вы можете использовать псевдоклассы. Они достаточно хорошо поддерживаются в IE8 и выше. Вы можете проверить совместимость любого псевдокласса, который вы собираетесь использовать, здесь http://caniuse.com/.

Если вам не нужна точка, просто используйте пустые запятые в содержимом, а затем отобразите:block, а также укажите высоту и ширину.

menu li:before {
    content: "";

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

}