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

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

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

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

Ответ 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 - хорошо работает.

Ответ 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:'@ ';}

Ответ 3

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

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

menu li:before {
    content: "";

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

}