web-dev-qa-db-fra.com

Plusieurs pseudo-classes CSS

Quelle est la syntaxe CSS appropriée pour appliquer plusieurs pseudo-classes à un sélecteur. Je voudrais insérer "," après chaque élément d'une liste, sauf le 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 car il ne prend pas en charge: après (comme prévu). Dans IE 8 cela s'affiche avec 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 cela ne fonctionne pas dans IE8 mais je voudrais savoir quelle est la syntaxe appropriée.

csssyntax
39
Brian Fisher

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

Pour citer la norme :

Les pseudo-classes sont autorisées n'importe où dans les sélecteurs tandis que les pseudo-éléments ne peuvent être ajoutés qu'après le dernier sélecteur simple du sélecteur.

Cela signifie que votre syntaxe est correcte selon CSS2.1 et CSS3 également , c'est-à-dire que IE8 est toujours nul;)

52
Christoph

Vous pouvez utiliser le sélecteur de frère adjacent :

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

Vous pouvez contourner cela en ayant une autre balise dans le <li/> et appliquez le :after à cela à la place. De cette façon, vous appliqueriez le :last-child et :after à différents éléments:

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

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

Il n'y a aucun problème à imbriquer des sélecteurs de pseudo-classe tant que les règles appliquées correspondent à l'élément particulier dans l'arborescence DOM. Je veux faire écho aux possibilités de style avec des sélecteurs de pseudo-classe de site Web w . Cela signifie que vous pouvez également faire des choses comme:

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

IE8 ne prend pas en charge le dernier enfant :( Ils se concentrent sur le tri du support CSS 2.1 auquel il ressemble. Pourquoi Microsoft n'a pas encore adopté Gecko ou Webkit, je ne sais pas.

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

1
roborourke