CSS Quantity Selector

The Quantity Queries for CSS essay from A List Apart shows how we can use current CSS selectors to perform quantity queries. By using the techniques in the essay, we can apply styles when the element count matches specific number, or when the element count is greater or smaller than the specific number.

Demonstrating nav showing 2 items, 3 items and 4 items with different font size

I created a demonstration on how this technique can be used in navigation. The font size is smaller when there are more items in the list. Imagine when the navigation items are controlled from a CMS and we have no control on exactly how many items there will be. This technique allows us to control the styles of an unknown amount of items.

I teach web design. I write books on HTML5 games development. I host classes on mobile web and app development. I made animation with Adobe Flash (now Animate).

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.