Parents counting children in CSS

posted on August 29., 2022

The other day I was driving home when suddenly it hit me: We can use :has() to determine how many children a parent element has.

You might be thinking that Heydon Pickering already solved that 7 years ago in Quantity Queries for CSS, but that's not what I'm talking about.

/*  Quantity Queries for CSS by Heydon Pickering */
/* Three or more items */
li:nth-last-child(n+3),
li:nth-last-child(n+3) ~ li {
  background: red;
}

What I mean is that now we can style the parent element and other children differently depending on the number of items present anywhere in the parent element.

The following code checks if there are at least 3 list items in the list and adds a border to the parent if that's the case.

ul:has(li:nth-child(3)) {
  border: 1px solid red;
}

(↑ no border)

(↑ red border)

(↑ red border)

We can adapt the selector a bit and only apply the styling if there are exactly three list items.

ul:has(li:nth-child(3):last-child) {
  border: 1px solid blue;
}

(↑ blue border)

(↑ no border)

A demo

I’ve built a demo to illustrate what can be done. If you click on the element, start typing and press Enter, the parent element tells you how many items you should add.

Pretty awesome, right? Try it on CodePen.

Use cases

I can image that this can be useful in content builders in CMS. You can use CSS to give users visual feedback depending on the number of items they have added to a block or component.