CSS Tip

Quantity queries using has() selector

Adjust the below to get your quantity query selector!

Select if it has and child elements
.container:has(> :nth-last-child(3):nth-child(-n + 8)) {
  /*                */
  /* your CSS here  */
  /*                */
}

Note: "At most N" is the same as "Between 1 and N" (0 is not included)

Here are two special quantity selectors that can be useful

/* select .container if it has an even number of child elements */
.container:has(> :last-child:nth-child(even)) {
  /* your CSS here */
}
/* select .container if it has an odd number of child elements */
.container:has(> :last-child:nth-child(odd)) {
  /* your CSS here */
}

Related: How many elements your container has?

More CSS Tips