Múltiples clases de pseudoclases de CSS

Question

¿Cuál es la sintaxis de CSS adecuada para aplicar múltiples pseudo clases a un selector? Me gustaría insertar "," después de cada elemento en una lista, excepto la última. Estoy utilizando el siguiente CSS:

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

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

Esto funciona bien en FF3, Chrome y Safari 3. Internet Explorer 7 no funciona porque no soporta: después (como se esperaba). En IE 8 esto se representa con una coma después de cada li incluyendo el último. ¿Es esto un problema con IE8 o es incorrecta mi sintaxis? Está bien si no funciona en IE8 pero me gustaría saber cuál es la sintaxis correcta.

Answer 1

:last-child es una pseudo-clase, mientras que :after (o ::after en CSS3) es un pseudo-elemento

Para citar the standard:

pseudo-clases se permiten en cualquier lugar de selectores mientras pseudo-elementos solamente pueden ser añadidos después de la última selector simple del selector.

Esto significa que su sintaxis es correcta de acuerdo con CSS 2.1 y CSS3 as well, es decir, IE8 aún se chupa;)

Answer 2

IE8 no es compatible con el último niño :(Son centrado en la clasificación de CSS 2.1 apoyo que parece. Gecko o WebKit por qué Microsoft no han adoptado todavía no lo sé.

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

Answer 3

se podría utilizar la adjacent sibling selector:.

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

Answer 4

Usted puede evitar esto por tener una etiqueta dentro de la otra <li/> y aplicar la :after a que en vez . De esa manera se estaría aplicando la :last-child y :after a diferentes elementos:

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

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

Answer 5

no hay ningún problema de anidación selectores de pseudo clase, siempre y cuando las reglas aplicadas partido del elemento particular en el DOM-árbol. Quiero hacerme eco de las posibilidades de estilo con pseudoclase selectores de w3 website. Eso significa que también puede hacer cosas como:

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