Change Grid Layout Using Quantity Queries

The trick of using :nth-child in the previous hero example is known as a quantity query. First developed by Heydon Pickering way before :has() existed, quantity queries originally leveraged :nth-last-child as a bit of a hack to count and style precise numbers of elements.

Using :has(), we can style based on quantities of child elements in a few different ways:

• ul:has(> :nth-child(2)) selects the ul if it has two or more children.

• ul:has(> :nth-child(2):last-child) selects ...