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.
nth-child en la misma regla:
ul li:nth-child(n+5):nth-child(-n+15) {
background: #08B;
}
Y obtenemos:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
¿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;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
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.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter