On gists

Quantity queries

CSS CSS trick

examples.css Raw #

/*
@see: https://www.hongkiat.com/blog/quantity-queries-css-quantity-aware/
*/

/* "At-least" query */
ul li:nth-last-child(n+5),
ul li:nth-last-child(n+5) ~ li {
  background-color: orange;
}


/* "At-most" query */
ul li:nth-last-child(-n+5):first-child,
ul li:nth-last-child(-n+5):first-child ~ li {
  background-color: orange;
}


/* "Between" query */
ul li:nth-last-child(n+5):nth-last-child(-n+6):first-child,
ul li:nth-last-child(n+5):nth-last-child(-n+6):first-child ~ li {
  background-color: orange;
}


/* OR */
/*  https://quantityqueries.com/ */

/* at-least 2 */
li:nth-last-child(n+2), li:nth-last-child(n+2) ~ li { }

/* at-most 2 */
li:nth-last-child(-n+2):first-child, li:nth-last-child(-n+2):first-child ~ li { }

/* at least / at most  2 - 4 */
li:nth-last-child(n+2):nth-last-child(-n+4):first-child, li:nth-last-child(n+2):nth-last-child(-n+4):first-child ~ li { }