A quantity query is a complex CSS selector that allows styles to be applied to elements based on the number of siblings.
At Least
Styles are applied to all elements when there are at least 5 number of items and siblings present.
.item:nth-last-child(n+5):first-child, .item:nth-last-child(n+5):first-child ~ .item {}
At Most
Styles are applied to all elements when there are at most 10 items and siblings present.
.item:nth-last-child(-n+10):first-child, .item:nth-last-child(-n+10):first-child ~ .item { }
Between
The best of both worlds. Styles are applied when the number of elements is between 3 and 5.
.item:nth-last-child(n+3):nth-last-child(-n+5):first-child, .item:nth-last-child(n+3):nth-last-child(-n+5):first-child ~ .item { }
Need more?
Quantity Queries are getting some traction in the industry. This site was developed as a companion piece to my article on Smashing Magazine. The article and this site could not have been possible however without the help and thoughts of Heydon Pickering and his article on A List Apart.