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).


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.

Wanna keep digging into more? Jen Kramer’s course Intermediate HTML & CSS gets into this in the video Level 4 Pseudo-Class Selectors.

Wanna learn CSS from a course?

Frontend Masters logo

FYI, we have a full CSS learning path with multiple courses depending on how you want to approach it.

5 responses to “Quantity Queries are Very Easy with CSS :has()”

  1. Avatar D7460N says:

    Thanks for this post! Appreciate your great work.

    :has() is the holy grail of native/passive/real-time detection of dynamic element changes, without slow scripting. What about content itself? Is it possible for :has(), in combination with :empty (?) to passively watch for, detect, and react to dynamic text changes? If so, quantity queries of dynamic elements are just the beginning!

    Thanks again!

  2. Avatar Manuel says:

    I created this demo when I discovered it for the first time:

    Blog post:

Leave a Reply

Your email address will not be published. Required fields are marked *