not - has css

Múltiples clases de pseudoclases de CSS

Question

¿Cuál es la sintaxis 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 usando 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. IE7 no funciona porque no admite: 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

IE8 no es compatible con last-child :( Están enfocados en solucionar el soporte de CSS 2.1. Parece que Microsoft no ha adoptado Gecko o Webkit pero no lo sé.

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

Answer 2

Puede usar el selector de hermanos adyacente :

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

Answer 3

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

Para citar el estándar :

Las pseudo-clases se permiten en cualquier lugar de los selectores, mientras que los pseudo-elementos solo se pueden agregar después del último selector simple del selector.

Esto significa que su sintaxis es correcta de acuerdo con CSS2.1 y CSS3 también , es decir, IE8 todavía es una mierda;)

Answer 4

Puede solucionar esto teniendo otra etiqueta dentro del <li/> y aplicar el :after a eso en su lugar. De esta manera, estarías aplicando el :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 problema en anidar selectores de pseudoclase siempre que las reglas aplicadas coincidan con el elemento particular en el árbol DOM. Quiero hacerme eco de las posibilidades de diseño con selectores de pseudo clase del sitio web w3 . Eso significa que también puedes hacer cosas como estas:

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