Can CSS detect the number of children an element has?

by

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:

Sources:

More Related Contents:

  1. how do I make device specific selectors in css [closed]
  2. Is there a “previous sibling” selector?
  3. What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB?
  4. CSS selector for first element with class
  5. What does the “+” (plus sign) CSS selector mean?
  6. How are the points in CSS specificity calculated
  7. Complex CSS selector for parent of active child [duplicate]
  8. CSS3 selector :first-of-type with class name?
  9. Why isn’t it possible to combine vendor-specific pseudo-elements/classes into one rule set?
  10. CSS selector for “foo that contains bar”? [duplicate]
  11. How to use JSF generated HTML element ID with colon “:” in CSS selectors?
  12. What does an asterisk (*) do in a CSS selector?
  13. Pure CSS checkbox image replacement
  14. CSS selector for attribute names based on a wildcard
  15. How can I select an nth child without knowing the parent element?
  16. How to select label for=”XYZ” in CSS?
  17. In which direction do selector engines read, exactly?
  18. Are CSS3 ::before and ::after pseudo elements supported by IE9 or not?
  19. What’s the difference between html[lang=”en”] and html:lang(en) in CSS?
  20. How can I apply styles to multiple classes at once?
  21. Can I colour backgrounds of selected items in HTML select options with CSS only?
  22. CSS3 combining selectors with OR instead of AND
  23. Why doesn’t this CSS :not() declaration filter down?
  24. Should I use single colons (:) or double colons (::) for before, after, first-letter and first-line pseudo-elements?
  25. How to show the first N elements of a block and hide the others in css?
  26. What is the difference between :before and ::before?
  27. How to skip first child?
  28. How to select all elements whose ID starts and ends with specific strings?
  29. selector for nth nested elements
  30. Latest on CSS parent selector [duplicate]

Leave a Comment