VOOZH about

URL: https://quantityqueries.com

⇱ QQ - Quantity Queries Builder

👁 Fork me on GitHub

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.