Plusieurs pseudo-classes CSS

Question

Quelle est la syntaxe CSS appropriée pour appliquer plusieurs pseudo-classes à un sélecteur. Je voudrais insérer "," après chaque élément dans une liste à l'exception du dernier. J'utilise le CSS suivant:

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

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

Cela fonctionne très bien sur FF3, Chrome et Safari 3. IE7 ne fonctionne pas parce qu'il ne supporte pas: après (comme prévu). Dans IE 8, cela se traduit par une virgule après chaque li, y compris le dernier. Est-ce un problème avec IE8 ou ma syntaxe est-elle incorrecte? C'est correct si ça ne marche pas dans IE8 mais j'aimerais savoir quelle est la syntaxe correcte.

Answer 1

:last-child est une pseudo-classe, alors que :after (ou ::after en CSS3) est un pseudo-élément

Pour citer the standard:

pseudo-classes sont autorisées partout dans sélecteurs en pseudo-éléments ne peuvent être ajoutés après le dernier sélecteur simple du sélecteur.

Cela signifie que votre syntaxe est correcte selon CSS2.1 et CSS3 as well, c.-à-IE8 suce encore;)

Answer 2

IE8 ne supporte pas la dernière enfant :(Ils sont concentrés sur le tri des CSS 2.1 support il ressemble. Pourquoi Microsoft n'ont pas adopté Gecko ou WebKit mais je ne sais pas.

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

Answer 3

Vous pouvez utiliser le adjacent sibling selector.

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

Answer 4

Vous pouvez contourner ce problème en ayant une autre balise dans la <li/> et appliquer le :after qu'au lieu . De cette façon, vous appliquerez la :last-child et :after à différents éléments: aussi longtemps que les règles correspondance appliqué l'élément particulier dans les DOM-tree

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

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

Answer 5

Il n'y a pas de problème de nidification sélecteurs de classe pseudo. Je veux faire écho aux possibilités de style avec des sélecteurs de classe pseudo de w3 website. Cela signifie que vous pouvez également faire des choses comme:

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