Несколько псевдо-классов CSS

Question

Каков правильный синтаксис CSS для применения нескольких псевдоклассов к селектору. Я хотел бы вставить "," после каждого элемента в списке, кроме последнего. Я использую следующие CSS:

ul.phone_numbers li:after {
    content: ",";
}

ul.phone_numbers li:last-child:after {
    content: "";
}

Это отлично работает на FF3, Chrome и Safari 3. IE7 не работает, потому что он не поддерживает: после (как и ожидалось). В IE 8 это отображается с запятой после каждого li, включая последний. Это проблема с IE8 или мой синтаксис неверен? Это нормально, если это не работает в IE8, но я хотел бы знать, каков правильный синтаксис.

Answer 1

:last-child - псевдокласс, тогда как :after (или ::after в CSS3) - псевдоэлемент.

Цитировать стандарт :

Псевдоклассы разрешены в любом месте селекторов, тогда как псевдоэлементы могут добавляться только после последнего простого селектора селектора.

Это означает, что ваш синтаксис правильный в соответствии с CSS2.1 и CSS3, а также , т.е. IE8 все еще отстой;)

Answer 2

Вы можете использовать соседний селектор брата :

ul.phone_numbers li + li:before {
   content: ",";
}

Answer 3

Вы можете обойти это, имея другой тег внутри <li/> и применив вместо него :after. Таким образом, вы будете применять :last-child и :after к различным элементам:

ul.phone_numbers li > span:after {
    content: ",";
}

ul.phone_numbers li:last-child > span:after {
    content: "";
}

Answer 4

Нет проблем с вложением селекторов псевдоклассов, если применяемые правила соответствуют конкретному элементу в DOM-дереве. Я хочу повторить возможности стилизации с помощью селекторов псевдо-классов с сайта w3 . Это означает, что вы также можете делать такие вещи, как:

.ElClass > div:nth-child(2):hover {
    background-color: #fff;
    /*your css styles here ... */
}

Answer 5

IE8 не поддерживает last-child :( Они сосредоточены на сортировке поддержки CSS 2.1, на что это похоже. Почему Microsoft еще не приняла Gecko или Webkit, я не знаю.

http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#pseudoclasses