Al seleccionar rangos de datos mostrados -por ejemplo- en listas uls debe ser de carácter casi obligatorio demarcar esta región seleccionada por el usuario, esto se puede hacerse muy fácilmente con un poco de CSS y es lo que mostraremos en esta entrada.

El selector nth-child al rescate para seleccionar rangos

Ya hemos hablado sobre el selector o pseudo-class llamada nth-child en una entrada anterior llamada: LA PSEUDO-CLASS NTH-CHILD EN CSS; este selector permite seleccionar elementos dentro de una lista de etiquetas consecutivas o no consecutivas.

ul li:nth-child(n+5):nth-child(-n+15) {
  background: #08B;
}

Y obtenemos:

¿Cómo funciona el CSS anterior?

Si vemos por trozos el CSS anterior verás lo sencillo que es; primero se seleccionan todos los elementos a partir de la lista número cinco (5) -5 a 20-:

ul li:nth-child(n+5){
  background: #08B;
}

A partir de este rango de selección se selecciona otro rango empleando otro selector nth-child sobre el grupo ya seleccionado con nth-child(-n+15); de esta forma se logra demarcar una región de una forma sencilla y eficiente.