Can CSS detect the number of children an element has?

Question

I'm probably answering my own question, but I'm extremely curious.

I know that CSS can select individual children of a parent, but is there support to style the children of a container, if its parent has a certain amount of children.

for example

container:children(8) {   // style the parent this way if there are 8 children } 

I know it sounds weird, but my manager asked me to check it out, haven't found anything on my own so I decided to turn to SO before ending the search.

Answer 1

Clarification:

Because of a previous phrasing in the original question, a few SO citizens have raised concerns that this answer could be misleading. Note that, in CSS3, styles cannot be applied to a parent node based on the number of children it has. However, styles can be applied to the children nodes based on the number of siblings they have.

---

Original answer:

Incredibly, this is now possible purely in CSS3.

/* one item */ li:first-child:nth-last-child(1) { /* -or- li:only-child { */     width: 100%; }  /* two items */ li:first-child:nth-last-child(2), li:first-child:nth-last-child(2) ~ li {     width: 50%; }  /* three items */ li:first-child:nth-last-child(3), li:first-child:nth-last-child(3) ~ li {     width: 33.3333%; }  /* four items */ li:first-child:nth-last-child(4), li:first-child:nth-last-child(4) ~ li {     width: 25%; } 

The trick is to select the first child when it's also the nth-from-the-last child. This effectively selects based on the number of siblings.

Credit for this technique goes to André Luís (discovered) & Lea Verou (refined).

Don't you just love CSS3? 😄

CodePen Example:

• https://codepen.io/mattlubner-the-decoder/pen/ExaQZQR

Sources:

• http://andr3.net/blog/post/142 (André Luís)
• http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ (Lea Verou)