Use Quantity Queries to Make Your CSS Quantity-Aware

Quantity queries are specially set-up CSS selectors that allow developers to make their code quantity-aware. In responsive design, we usually use media queries to adapt our design to different viewports. In some cases however, we may want to switch to a different layout or use other dimensions or aesthetics after a certain quantity of the same content type is present on the screen.

Read Also:  A Guide to Understanding CSS Style Priorities

It’s a frequent issue with dynamic websites that we don’t always know in advance how many items will be on the screen. Think about tags at the end of blog posts, product-specific filters in the navigation of eCommerce sites, or on-site search results. This is when quantity queries can give us an elegant, CSS-only solution, and save us from the hassle of using JavaScript.

How quantity queries are composed

We can build three kinds of quantity queries:

1. "At-least" queries when there are more than a certain quantity of the same content type on the screen.
2. "At-most" queries when there are less than a certain quantity of the same content type on the screen.
3. "Between" queries when there are more than a certain quantity, but less than another quantity of the same content type on the screen.

All three types of quantity queries are built by using the :nth-last-child CSS pseudo-class and the general sibling selector (~), while "at-most" and "between" queries also make use of the :first-child pseudo-class.

The :nth-last-child pseudo-class behaves similarly to :nth-child, however it starts the counting from the last child, while the general sibling selector (~) selects all elements that come after a certain sibling element.

Recommended Reading: Web Design: A Guide to CSS3 pseudo-classes

"At-least" queries

The most important thing to understand is that quantity queries select all elements that belong to the same parent element, as the goal is to assign the same design to all the elements that meet the quantity criteria.

In the code snippet below, we select all <li> elements in an unordered list that contains minimum five list elements.

/* "At-least" query */
ul li:nth-last-child(n+5),
ul li:nth-last-child(n+5) ~ li {
  background-color: orange;
}

As you can see, an "at-least" query is made up of two CSS selectors. The first selector, ul li:nth-last-child(n+5) selects all <li> elements that are at least five elements far from the last child. This style rule alone is not enough though, as it doesn’t make all the elements look the same—the last four elements will keep their original style. That’s why we need to add the second selector, that selects all general siblings of the previously selected elements.

To get back to our example code, it adds an orange background to all the elements of unordered lists that have at least five elements, while unordered lists with less than five <li> elements will keep their default (blue) color. You can test live how the "at-least" query works in the Codepen pen below.

"At-most" queries

"At-most" queries are also made up of two selectors, however they don’t only rely on the :nth-last-child pseudo-class, but also on :first-child. The example code below selects all <li> elements that belong to an unordered list that have maximum five list elements.

/* "At-most" query */
ul li:nth-last-child(-n+5):first-child,
ul li:nth-last-child(-n+5):first-child ~ li {
  background-color: orange;
}

The first part of the first selector, :nth-last-child(-n+5), uses a negative value that swaps the direction of the selection—it still counts from the last child (which is the built-in nature of the :nth-last-child pseudo-class), however now it will select the last five elements (i.e. the elements that are not at least five elements far from the last child). This selector selects the last five elements of any unordered list, however we only want to select those that have maximum five elements (as this way all the elements will be selected).

That’s why we need to combine it with the :first-child pseudo-class that will select the first elements of the previously selected list elements, but only for those that are also the first child of their <ul> parent, which is only true for unordered lists that contain maximum five <li> elements.

Now we don’t have to do anything than to add the second selector, which will select the general siblings of the previously selected :first-child elements. And that’s it, our "at-most" query is done. Y ou can play around with the CSS code in the live demo below to see how it works.

"Between" queries

The "between" query combines the code we’ve used for the "at-least" and "at-most" queries. The code example below selects all elements of unordered lists that contain minimum five but maximum six list elements.

/* "Between" query */
ul li:nth-last-child(n+5):nth-last-child(-n+6):first-child,
ul li:nth-last-child(n+5):nth-last-child(-n+6):first-child ~ li {
  background-color: orange;
}

To build a "between query" we concatenate the CSS selectors belonging to the appropriate "at-least" and "at-most" queries. The "at-least" query in our example is :nth-last-child(n+5), while the "at-most" query is :nth-last-child(-n+6):first-child, we simply join them with a colon.

Use cases

Quantity queries have many interesting use cases from content-aware navigations to automatic grid systems, here’s a collection of some of the best:

• A List Apart: How to build a content-aware navigation
• Tomango: A tag list and a flexible grid system
• Charlotte Jackson’s blog: Code experiments with quantity queries
• Codepen: An automatic grid system by Vincent Durand
• Codepen: An image grid using quantity queries and Flexbox by Lucas Lemonnier
• Codepen: A collapsable link list by Craig Morey

Tools to build quantity queries

There are some great developer tools out there that can help you build quantity queries more easily.

Quantity query builder

This handy quantity query builder makes the creation of quantity queries easy and straightforward. You only have to fill in three input fields (elements to be counted, type of query, amount of items), and the tool generates the quantity query you need.

Quantity query mixins for SASS

You can use these simple quantity query mixins in your Sass projects. The author, Daniel Guillan, also created a Codepen demo where you can check out the mixins in action.

PostCSS plugin for quantity queries

This PostCSS plugin is built on top of the aforementioned quantity query mixins, and allows you to include quantity queries into your PostCSS workflow.

Read Also:  20 Basic CSS Tips for Designers