{"id":28934,"date":"2019-09-18T23:11:22","date_gmt":"2019-09-18T15:11:22","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=28934"},"modified":"2019-09-22T23:24:17","modified_gmt":"2019-09-22T15:24:17","slug":"quantity-queries-css-quantity-aware","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/quantity-queries-css-quantity-aware\/","title":{"rendered":"Use Quantity Queries to Make Your CSS Quantity-Aware"},"content":{"rendered":"

Quantity queries<\/strong> are specially set-up CSS selectors<\/strong> that allow developers to make their code quantity-aware<\/strong>. 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<\/strong> on the screen.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tA Guide to Understanding CSS Style Priorities<\/a>\n\t\t\t\t<\/p>\n

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

How quantity queries are composed<\/h2>\n

We can build three kinds of quantity queries<\/strong>:<\/p>\n

    \n
  1. \"At-least\" queries<\/strong> when there are more than<\/strong> a certain quantity of the same content type on the screen.<\/li>\n
  2. \"At-most\" queries<\/strong> when there are less than<\/strong> a certain quantity of the same content type on the screen.<\/li>\n
  3. \"Between\" queries<\/strong> when there are more than<\/strong> a certain quantity, but less than<\/strong> another quantity of the same content type on the screen.<\/li>\n<\/ol>\n

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

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

    Recommended Reading:<\/strong> Web Design: A Guide to CSS3 pseudo-classes<\/a><\/p>\n

    \"At-least\" queries<\/h2>\n

    The most important thing to understand is that quantity queries select all elements<\/strong> that belong to the same parent element, as the goal is to assign the same design<\/strong> to all the elements that meet the quantity criteria<\/strong>.<\/p>\n

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

    \r\n\/* \"At-least\" query *\/\r\nul li:nth-last-child(n+5),\r\nul li:nth-last-child(n+5) ~ li {\r\n  background-color: orange;\r\n}\r\n<\/pre>\n
    As you can see, an \"at-least\" query is made up of two CSS selectors<\/strong>. The first selector, ul li:nth-last-child(n+5)<\/code> selects all <li><\/code> elements that are at least five elements far from the last child<\/strong>. This style rule alone is not enough though, as it doesn\u2019t make all the elements look the same\u2014the last four elements will keep their original style. That\u2019s why we need to add the second selector, that selects all general siblings<\/strong> of the previously selected elements.<\/p>\n
    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<\/strong>, while unordered lists with less than five <li><\/code> elements will keep their default (blue) color<\/strong>. You can test live<\/strong> how the \"at-least\" query works in the Codepen pen below.<\/p>\n