Seleccionar rangos de elementos con CSS

- Andrés Cruz

Seleccionar rangos de elementos con CSS

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.

Para seleccionar un rango de elementos basta con emplear un par de veces el mismo selector 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.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.