Quantity queries using has() selector
Adjust the below to get your quantity query selector!
.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
- Progress element with a tooltip Adding a tooltip to the native progress element showing the precentage of progress.
- Curved avatar header with hover effect Create a fancy curved header with a cool hover effect.
- A CSS generator for wavy circle shapes Use modern CSS to create a wavy circle shape in no time.
- Arc shape with rounded edges a few lines of modern CSS to create an arc shape with rounded edges.