{"id":239,"date":"2023-12-11T22:21:34","date_gmt":"2023-12-11T22:21:34","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=239"},"modified":"2023-12-15T20:44:52","modified_gmt":"2023-12-15T20:44:52","slug":"quantity-queries-are-very-easy-with-css-has","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/quantity-queries-are-very-easy-with-css-has\/","title":{"rendered":"Quantity Queries are Very Easy with CSS :has()"},"content":{"rendered":"\n

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<\/em> the element has. <\/p>\n\n\n\n

Example of a Quantity Query Situation<\/h2>\n\n\n\n

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. <\/p>\n\n\n\n

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. <\/p>\n\n\n\n

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

main<\/span> {\n  \n  \/* if (articles > 20) *\/<\/span>\n  display<\/span>: grid;\n  grid-template-columns<\/span>: repeat<\/span>(5<\/span>, 1<\/span>fr);\n\n  \/* if (articles > 5) *\/<\/span>\n  display<\/span>: flex;\n  flex-wrap<\/span>: flex;\n  article<\/span>:first-of-type { width: 100%<\/span> }\n\n  \/* default *\/<\/span>\n  display<\/span>: block<\/span>;\n\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Old School Quantity Query<\/h2>\n\n\n\n
Believe it or not, this has been possible in CSS for a while! It just involves some trickery. Here’s Heydon’s first example:<\/p>\n\n\n
button<\/span> {\n  font-size<\/span>: 2em<\/span>;\n}\n\nbutton<\/span>:not(<\/span>:only-of-type)<\/span> {\n  font-size<\/span>: 1.25em<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
See what that’s doing? That second selector is saying: if this button isn’t totally alone<\/em> in its parent element, scale down the font-size<\/code>. Essentially: if one<\/em>, do this, if more<\/em>, 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. <\/p>\n\n\n\n
Quantity Queries with :has()<\/h2>\n\n\n\n
Now we have :has()<\/code> 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. <\/p>\n\n\n\n
Here’s how it works.<\/p>\n\n\n\n
You check if<\/em> an element has an element at all at an :nth-child()<\/code> position. For example, to check if an element has 10 or more<\/strong> elements (a quantity query), you can do:<\/p>\n\n\n
.element<\/span> {\n  &:has(> :nth-child(10)) {\n\n    \/* Style things knowing that \n       `.element` has at least 10 \n       children *\/<\/span>\n\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
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. <\/p>\n\n\n
.element<\/span> {\n\n  &:has(> :nth-child(10)) { }\n  &:has(<\/span>> :nth-child(20))<\/span> { }\n  &:has(<\/span>> :nth-child(30))<\/span> { }\n\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\n
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 \/><\/code> element seperators now<\/a>, which aren’t actually menu options. <\/p>\n\n\n
selectlist<\/span> {\n\n  &:has(option<\/span>:nth-of-type<\/span>(10<\/span>)) { }\n\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Example<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
(Wondering what a <selectlist><\/code> is? We can’t use it quite yet, but it’s looking to be<\/a> a 100% CSS styleable <select><\/code>, which is awesome). <\/p>\n\n\n\n
(Note the ><\/code> child selector is a bit safer<\/a> than not using it, as it protects against some descendant element having this many children, which is probably not what you mean.)<\/p>\n\n\n\n