Para acceder con CSS a elementos vía su orden podemos usar los siguientes selectores:
En este ejemplo podemos usar :nth-child(8) para acceder al 8º elemento de un listado
li:nth-child(8) span {
background-color: #298EB2;
box-shadow: -3px -3px 10px rgba(0, 0, 0, 0.4), inset 0 0 10px black;
}
Usando :nth-child(n+6) accederemos a varios elementos, del 6º hasta el último
li:nth-child(n+6) span {
background-color: #298EB2;
box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}
Usando :nth-child(-n+9) accederemos también a varios elementos, en este caso del 9º al primero.
li:nth-child(-n+9) span {
background-color: #298EB2;
box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}
Usando nth-child(n+4):nth-child(-n+8) podemos acceder a un rango de elementos, en este caso del 4º al 8º
li:nth-child(n+4):nth-child(-n+8) span {
background-color: #298EB2;
box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}
Més info aquí
