Nos gustaría unir los últimos 12 elementos de un contenedor principal. ¿Cómo hacer esto con CSS? Para aclarar, 12 es un número arbitrario. Nos gustaría saber cómo hacer coincidir los últimos N elementos de un contenedor principal.¿Cómo hacer coincidir los últimos n niños con CSS?
Definitivamente :nth-last-child(N)
li:nth-last-child(-n+12) {
/*your css declarations*/
}
Este selector de ejemplo coincidirá con los últimos 12 elementos de la lista en cualquier lista, ya sea ordenada o desordenada:
Pero no es compatible con IE 8. Y este no es un CSS válido. – Pavlo
@PavloMykhalov ¡Es cierto! IE8 no es compatible con las pseudo clases de CSS3 y esta pregunta está etiquetada con CSS3 – Dipak
@Dipacks. Es suficiente. Pero, ¿qué pasa con CSS no válido? Mi sugerencia: hacer una segunda línea de un comentario: '/ * declaraciones * /'. – Pavlo
Desea que :nth-last-childpseudoclass (o :nth-last-of-type para comprobar el tipo). Después de que se puede utilizar para seleccionar ~ todos los hermanos siguientes:
.container > *:nth-last-child(13) ~ * { }
http://reference.sitepoint.com/css/pseudoclass-nthlastchild
li:nth-last-child(-n+12) {
⋮ declarations
}
Sugerencia: no con ': nth-child()'. – BoltClock
12 suena como un número muy mágico. Sería más inteligente reconsiderar exactamente * por qué * quieres 12. –
12 es un número arbitrario. Perdón por la confusion. – Crashalot