Can CSS Detect the Number of Children an Element Has

Can CSS detect the number of children an element has?

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? /p>

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)

Can I detect the number of children,While the Children Count will exceed four, in CSS?

You don't have to use Javascript to accomplish this. Heydon Pickering wrote a great article about using various pseudo selectors to style content based on count. I highly recommend reading the article.

nth-last-child(n+4) on its own gets you every element that is 4+ from the end. With 5 elements only the first is select, 6 elements 1 and 2 are selected, etc.

nth-last-child(n+4) ~ li is what makes the entire thing come together. ~ is the sibling selector. Used in this scenario anything before ~ is selected as well as anything that is a direct sibling to the previous matches and matches li.

Update

Based on your comment in the original question I've added an additional CSS selector to get 3 or fewer. If you want only 3 change -n+3 to 3.

Unless you're proposed with a challenge, or really like thinking about nth children, this isn't something you'd normally pick up making Javascript seem like your only solution.

li:nth-last-child(-n+3):first-child,
li:nth-last-child(-n+3):first-child ~ li {
  /* 3 or Less */
  color: blue;
}

li:nth-last-child(n+4),
li:nth-last-child(n+4) ~ li {
  /* 4 or More */
  color: red;
}

<ul>
  <li>1</li>
  <li>2</li>
</ul>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

CSS detect factor of siblings

Since nth-last-child can take a formula, you can do this for any number of elements using the same technique as in the other question you referenced.

ul {  padding-left: 0;}
ul::after {  content: '';  display: table;  clear: both;}
li {  background-color: #efefef;  border: 1px dotted #000;  box-sizing: content-box;  float: left;  list-style-type: none;  padding: 10px 0;  text-align: center;  width: 33%}
/* 3 elements in last row */li:first-child:nth-last-child(3n+0) ~ li:nth-last-child(1),li:first-child:nth-last-child(3n+0) ~ li:nth-last-child(2),li:first-child:nth-last-child(3n+0) ~ li:nth-last-child(3),
/* 2 elements in last row */li:first-child:nth-last-child(3n+2) ~ li:nth-last-child(1),li:first-child:nth-last-child(3n+2) ~ li:nth-last-child(2),
/* 1 element in last row */li:first-child:nth-last-child(3n+1) ~ li:nth-last-child(1) {  background-color: orange;}

<ul>  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li></ul><ul>  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li>5</li></ul><ul>  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li>5</li>  <li>6</li></ul><ul>  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li>5</li>  <li>6</li>  <li>7</li>  <li>8</li>  <li>9</li>  <li>10</li>  <li>11</li>  <li>12</li>  <li>13</li></ul>