Quantity Queries are Very Easy with CSS :has()

What is a quantity query? It’s a bit of CSS that allows you to style an element (and its descendants) based on how many children the element has.

Example of a Quantity Query Situation

Imagine a homepage currently showing 20 articles, more than you normally show. Maybe it’s a slow news day, and the lead editor is shooting for variety. So because that’s a lot, you want CSS to scale them down a bit or re-arrange them to make them more equally browsable.

But then you have a really big news day with a lead story, so you decide only to show five articles, the first of which you want to make very large.

Quantity queries (originally coined by Heydon Pickering, best I can tell) may be a solution for this. Here’s some pseudo code to explain:

main {
  
  /* if (articles > 20) */
  display: grid;
  grid-template-columns: repeat(5, 1fr);

  /* if (articles > 5) */
  display: flex;
  flex-wrap: flex;
  article:first-of-type { width: 100% }

  /* default */
  display: block;

}Code language: CSS (css)

Old School Quantity Query

Believe it or not, this has been possible in CSS for a while! It just involves some trickery. Here’s Heydon’s first example:

button {
  font-size: 2em;
}

button:not(:only-of-type) {
  font-size: 1.25em;
}Code language: CSS (css)

See what that’s doing? That second selector is saying: if this button isn’t totally alone in its parent element, scale down the font-size. Essentially: if one, do this, if more, do this. A simple quantity query. With increasingly complicated selectors like that, you can pull of quantity math. You didn’t see it very often though, as it was pretty weird and complicated.

Quantity Queries with :has()

Now we have :has() in CSS, supported across all the major browsers as of just this month, and we can use it to make quantity queries a lot easier.

Here’s how it works.

You check if an element has an element at all at an :nth-child() position. For example, to check if an element has 10 or more elements (a quantity query), you can do:

.element {
  &:has(> :nth-child(10)) {

    /* Style things knowing that 
       `.element` has at least 10 
       children */

  }
}Code language: CSS (css)

You can keep going if you like. Just know that for each of them that matches, all the styles will be applied, so it’s rather additive.

.element {

  &:has(> :nth-child(10)) { }
  &:has(> :nth-child(20)) { }
  &:has(> :nth-child(30)) { }

}Code language: CSS (css)

(Note the > child selector is a bit safer than not using it, as it protects against some descendant element having this many children, which is probably not what you mean.)

---

You could also make sure you’re checking for a particular element type. Like perhaps doing some special styling for a menu that has 10 options within it (or more), knowing that select menus can contain <hr /> element seperators now, which aren’t actually menu options.

selectlist {

  &:has(option:nth-of-type(10)) { }

}Code language: CSS (css)

(Wondering what a <selectlist> is? We can’t use it quite yet, but it’s looking to be a 100% CSS styleable <select>, which is awesome).

Example

Here’s a demo where a range input changes the number of children elements are within a parent, then changes the styling of the children depending on how many there are.

---

What other things can you think of where quantity queries would benefit? Perhaps you would style an article differently if it contains 5 or more header elements. Perhaps you could style table rows to look “collapsed” if there are over a certain threshold of them. Perhaps you would style a comment thread differently if a certain comment has more than 10 replies.