Generate CSS Quantity Queries with the QQ Builder

By Jake Rocheleau. in Web Design. Updated on April 9, 2018.

Few developers know about or use CSS quantity queries on their websites. It’s a fairly complex feature but also useful when you have varying items in a container.

A quantity query can change/update CSS properties based on pre-defined limits for child elements. For example, if you have more than three items in a list you might make the font smaller to save room. Another example is updating the width of a link based on the number of links in a navigation menu.

Tasks like these can get complicated quickly but thanks to the Quantity Queries Builder you don’t need to memorize any confusing syntax.

This web app generates all the code for you to save time. You need to select from three dropdown menus that customize your quantity query. They work like this:

Selector – which child element(s) should be counted
Query type – choose between “at most”, “at least”, or a combo of “at most” & “at least”
Amount – total number of items to filter

This seems confusing in code but it’s a really simple concept. Quantity queries let you apply CSS properties based on the total number of child elements.

So you can add certain CSS styles when there’s, say, at least 4 child elements (4 or more). Or, you could add styles only when there’s at most 4 child elements (0-4 children).

The combo selector lets you define exactly how many minimum & maximum children are necessary to display certain CSS properties.

In the example on the screenshot above, I’ve set the total “at most” items to 2. This means when I have 0, 1, or 2 children the blocks are red. If I add one more to get 3 children then all the blocks turn blue.

If you have no idea what’s going on you can click the small information box in the sidebar. It’ll bring up a modal window with facts and syntax explaining the quantity query feature.

This is a very handy tool for both beginners and experienced developers. It’ll save lots of time in the long run and it’ll help you create more dynamic websites.

To get started, visit the QQ builder website and start customizing your features. You can toy with the results and check the live preview in the right pane to learn how your changes affect the child elements.

This project is also available on GitHub so you’re free to check out the source code or even download a copy locally. And if you love this app or have any questions/suggestions for the creator Drew Minns you can shoot him a quick tweet @drewisthe.