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) .child {
  //style the children 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.

Jun 3 '20 edit by @vsync should be reverted, as it changes the code sample in a way that does not agree in any way with the question itself or its answers. — Nicole Ashley
– Nicole Ashley, Commented Jan 13, 2021 at 23:53

Matthemattics · Accepted Answer · 2020-01-07 19:39:59Z

912

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)

edited Jan 7, 2020 at 19:39

answered Aug 30, 2012 at 13:56

Matthemattics

9,9351 gold badge23 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

19 Comments

SimpleJ Over a year ago

Very handy. I wrote a SASS mixin that makes use of this technique: codepen.io/anon/pen/pJeLdE?editors=110

Ian Steffy Over a year ago

If it works in codepen but not with my project then it is most definitely my fault. My bad. This answer is correct! Correct, I say!

Legolas Over a year ago

Might be nice to add why this works, for people not used to multiple pseudo selectors (like I was until now ;). What is happening here is that this selects the child that is at the same time child x from the start/top and child y from the end. And so this only selects something if there are exactly x+y children.

Adam Reis Over a year ago

Note that instead of :first-child:nth-last-child(1) you can also use :only-child.

jimmymcheung Over a year ago

Just to point out that with the new :has() selector being implanted in many browsers, CSS can now select parent.

|

Temani Afif · Accepted Answer · 2024-11-29 19:09:25Z

98

Now we can use the :has() selector to identify the number of items and apply style to the container as well as the child items

Code taken from my blog: css-tip.com/number-elements-has-selector (I also made a quantity query generator to easily generate the code)

The below will give you an exact counting:

.container {
  height: 50px;
  margin: 10px;
}

.container:not(:has(*)) { /* 0 elements */
  background: yellow;
}
.container:has(> :last-child:nth-child(1)) { /* 1 element */
  background: red;
}
.container:has(> :last-child:nth-child(2)) { /* 2 elements */
  background: blue;
}
.container:has(> :last-child:nth-child(3)) { /* 3 elements */
  background: green;
}
/* For N elements 
.container:has(> :last-child:nth-child(N)) {
  background: red;
}
*/

<div class="container">

</div>
<div class="container">
  <div></div>
</div>
<div class="container">
  <div></div>
  <div></div>
</div>
<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

But you can also have a range selection:

.container {
  height: 50px;
  margin: 10px;
}

.container:has(> :nth-child(3)) { /* 3 elements or more */
  background: blue;
}
/* .container:has(> :nth-child(X)) : X elements or more */

.container:has(> :last-child:nth-child(-n + 3)) { /* between 1 and 3 elements */
  border: 5px solid red;
}
/* .container:has(> :last-child:nth-child(-n + X)): between 1 and X elements */

.container:has(> :nth-last-child(3):nth-child(-n + 3)) { /* between 3 and 5 elements */
  width: 80%;
}
/* .container:has(> :nth-last-child(X):nth-child(-n + (Y - X + 1))): between X and Y elements */

<div class="container">
  <div></div>
</div>
<div class="container">
  <div></div>
  <div></div>
</div>
<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

edited Nov 29, 2024 at 19:09

answered Oct 10, 2022 at 14:42

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

5 Comments

Abdul Jabbar Over a year ago

It's still in very early stage. It should not be used on Production Level caniuse.com/css-has

Bernesto Over a year ago

I'd like to add to this that you can use :has(> :nth-child(n+3)) if you want to have the properties applied if there are a minimum number of items too.

Venryx Over a year ago

@Bernesto Isn't it just :has(> :nth-child(3))? Why add the n+ part?

ivarni Over a year ago

Just like to point out that :has is now supported in Firefox so this is now perfectly fine for production unless you're supporting some very old browsers.

NovaDev Feb 12 at 14:07

This also works for nth-of-type()

derekerdmann · Accepted Answer · 2012-01-04 02:02:21Z

67

No. Well, not really. There are a couple of selectors that can get you somewhat close, but probably won't work in your example and don't have the best browser compatibility.

`:only-child`

The :only-child is one of the few true counting selectors in the sense that it's only applied when there is one child of the element's parent. Using your idealized example, it acts like children(1) probably would.

`:nth-child`

The :nth-child selector might actually get you where you want to go depending on what you're really looking to do. If you want to style all elements if there are 8 children, you're out of luck. If, however, you want to apply styles to the 8th and later elements, try this:

p:nth-child( n + 8 ){
    /* add styles to make it pretty */
}

Unfortunately, these probably aren't the solutions you're looking for. In the end, you'll probably need to use some Javascript wizardry to apply the styles based on the count - even if you were to use one of these, you'd need to have a hard look at browser compatibility before going with a pure CSS solution.

W3 CSS3 Spec on pseudo-classes

EDIT I read your question a little differently - there are a couple other ways to style the parent, not the children. Let me throw a few other selectors your way:

`:empty` and `:not`

This styles elements that have no children. Not that useful on its own, but when paired with the :not selector, you can style only the elements that have children:

div:not(:empty) {
    /* We know it has stuff in it! */
}

You can't count how many children are available with pure CSS here, but it is another interesting selector that lets you do cool things.

edited Jan 4, 2012 at 2:02

answered Jan 4, 2012 at 1:37

derekerdmann

18.4k12 gold badges83 silver badges113 bronze badges

2 Comments

Matthemattics Over a year ago

It's worth noting the original question was edited, rendering the initial "No" a bit misleading (just fyi 😛)

kcpr Over a year ago

Beware! The last solution (with :not(:empty)) will not work if one would like to style only elements with "real" content (concrete elements for example) - as it will style also divs with only whitespaces or newline characters for example: jsfiddle.net/c69kbuxm . Considering that the statement "This styles elements that have no children." may be misleading I believe. Thank You for the answer anyway.

ifugu · Accepted Answer · 2014-09-11 20:40:43Z

28

NOTE: This solution will return the children of sets of certain lengths, not the parent element as you have asked. Hopefully, it's still useful.

Andre Luis came up with a method: http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ Unfortunately, it only works in IE9 and above.

Essentially, you combine :nth-child() with other pseudo classes that deal with the position of an element. This approach allows you to specify elements from sets of elements with specific lengths.

For instance :nth-child(1):nth-last-child(3) matches the first element in a set while also being the 3rd element from the end of the set. This does two things: guarantees that the set only has three elements and that we have the first of the three. To specify the second element of the three element set, we'd use :nth-child(2):nth-last-child(2).

Example 1 - Select all list elements if set has three elements:

li:nth-child(1):nth-last-child(3),
li:nth-child(2):nth-last-child(2),
li:nth-child(3):nth-last-child(1) {
    width: 33.3333%;
}

Example 1 alternative from Lea Verou:

li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}

Example 2 - target last element of set with three list elements:

li:nth-child(3):last-child {
    /* I'm the last of three */
}

Example 2 alternative:

li:nth-child(3):nth-last-child(1) {
    /* I'm the last of three */
}

Example 3 - target second element of set with four list elements:

li:nth-child(2):nth-last-child(3) {
    /* I'm the second of four */
}

edited Sep 11, 2014 at 20:40

answered Jul 19, 2012 at 19:26

ifugu

6587 silver badges11 bronze badges

3 Comments

Tomas Over a year ago

again, this is number of siblings, not children

ifugu Over a year ago

@TMS see accepted answer's edit - the OP's question was awkwardly phrased

Greg Smith Over a year ago

This approach is perfect for when each element needs to be styled differently based on its position in the list, e.g. to get even circular transforms:

li:nth-child(3):nth-last-child(1) { transform: rotate(120deg); } li:nth-child(2):nth-last-child(2) { transform: rotate(240deg); }

and so on...

mwtidd · Accepted Answer · 2015-08-10 14:57:59Z

13

Working off of Matt's solution, I used the following Compass/SCSS implementation.

@for $i from 1 through 20 {
    li:first-child:nth-last-child( #{$i} ),
    li:first-child:nth-last-child( #{$i} ) ~ li {
      width: calc(100% / #{$i} - 10px);
    }
  }

This allows you to quickly expand the number of items.

answered Aug 10, 2015 at 14:57

mwtidd

1311 silver badge3 bronze badges

1 Comment

Michał Miszczyszyn Over a year ago

Instead of this you could easily use Flexbox…

Juan Sebastian Contreras Aceve · Accepted Answer · 2017-04-12 17:39:22Z

5

If you are going to do it in pure CSS (using scss) but you have different elements/classes inside the same parent class you can use this version!!

  &:first-of-type:nth-last-of-type(1) {
    max-width: 100%;
  }

  @for $i from 2 through 10 {
    &:first-of-type:nth-last-of-type(#{$i}),
    &:first-of-type:nth-last-of-type(#{$i}) ~ & {
      max-width: (100% / #{$i});
    }
  }

answered Apr 12, 2017 at 17:39

Juan Sebastian Contreras Aceve

1271 silver badge3 bronze badges

Comments

Teocci · Accepted Answer · 2021-12-03 04:40:07Z

5

Yes we can do this using nth-child like this:

div:nth-child(n + 8) {
    background: red;
}

This will make the 8th div child onwards become red. Hope this helps...

Also, if someone ever says "hey, they can't be done with styled using css, use JS!" doubt them immediately. CSS is extremely flexible nowadays

.container div {
  background: blue;
}

.container div:nth-child(n + 8) {
  background: red;
}

<div class="container">
  <div>div 1</div>
  <div>div 2</div>
  <div>div 3</div>
  <div>div 4</div>
  <div>div 5</div>
  <div>div 6</div>
  <div>div 7</div>
  <div>div 8</div>
  <div>div 9</div>
  <div>div 10</div>
  <div>div 11</div>
  <div>div 12</div>
</div>

In the example the first 7 children are blue, then 8 onwards are red...

[External example]

edited Dec 3, 2021 at 4:40

Teocci

9,3751 gold badge71 silver badges56 bronze badges

answered Jan 4, 2012 at 1:30

AlanFoster

8,3245 gold badges38 silver badges52 bronze badges

5 Comments

benesch Over a year ago

Perhaps add a note about the unfortunate lack of support?

Ben Hull Over a year ago

I don't think this is exactly what Brodie is asking - this will style the children after a given amount, but can't select the ancestor/containing element based on the number of its children.

Brodie Over a year ago

This is actually some pretty good information though, thanks alan but bee is right, I was trying to say "if an element has this many children us this style" If I'm not mistaken your method would style the 8th child on, but the first 7 would be lonely and naked.

Rob Over a year ago

@primatology - The only browser that doesn't support nth-child is IE<9. All others have been supporting it two versions back or more.

Tomas Over a year ago

-1 This will not make div child red, this will make the div red based on its number within its siblings! Is not related to div's child in any way!

fredrivett · Accepted Answer · 2021-08-17 10:39:16Z

4

If you're looking for a way to style all elements if more than N exist (e.g. 2 or more):

li:first-child:nth-last-child(n+2),
li:first-child:nth-last-child(n+2) ~ li {
  background-color: red;
}

<ul>
  <li>first</li>
</ul>

<ul>
  <li>first</li>
  <li>second</li>
</ul>

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

edited Aug 17, 2021 at 10:39

answered Jul 7, 2021 at 18:47

fredrivett

6,7223 gold badges48 silver badges57 bronze badges

4 Comments

F. Certainly. Over a year ago

Can this be used to select and style only the 6th element, if it is also the 5th from the last? If so, then, for example, when you had pagination on mobile that showed too many pages, you could set some of the center ones to display:none.

fredrivett Over a year ago

@F.Certainly. that's quite a different requirement, but is possible with li:nth-child(6):nth-last-child(5) { background-color: red } jsfiddle.net/0eahnrfd

F. Certainly. Over a year ago

For some reason that wouldn't set the display property to none, but the original solution turned out for the better

fredrivett Over a year ago

The some reason probably would be specificity issues, with another set of rules overriding it if background-color: red or similar worked.

vsync · Accepted Answer · 2025-08-25 15:01:34Z

Since this question is about styling the children themselves, rather than their parent (or any ancestor), it is now possible using the CSS sibling-count function:

@property --siblings {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

@property --more-than-n-children {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

body{ font:32px arial; }

section b {
  --siblings: sibling-count();
  --n: 2;
  --more-than-n-children: clamp(0, var(--siblings) - var(--n), 1);

  color: if(
   style(--siblings: 2): red; 
   style(--siblings: 3): green; 
   else: blue
  );

  text-decoration: if(
   style(--more-than-n-children: 1): underline
  );
}

<section>
  <b>1</b>
</section>

<section>
  <b>1</b>
  <b>2</b>
</section>

<section>
  <b>1</b>
  <b>2</b>
  <b>3</b>
</section>

<section>
  <b>1</b>
  <b>2</b>
  <b>3</b>
  <b>4</b>
</section>

The above should render as so:

It is a valid solution for some situations and for others it's simpler to do:

section:has(> :last-child:nth-child(3)) {
  color: green;
}

<section>
  <b>1</b>
  <b>2</b>
</section>

<section>
  <b>1</b>
  <b>2</b>
  <b>3</b>
</section>

<section>
  <b>1</b>
  <b>2</b>
  <b>3</b>
  <b>4</b>
</section>

Dawid Frankiewicz · Accepted Answer · 2022-12-22 13:37:37Z

1

You can use :has selector like this:

.parent-element:has(:nth-child(8))

It selects element with .parent-element class that has child number 8. If child number 8 does not exist, rule will not be applied.

Unfortunately :has is not supported in firefox by default. You can still use it and add extra tricky rule for firefox support.

answered Dec 22, 2022 at 13:37

Dawid Frankiewicz

1287 bronze badges

1 Comment

Aurovrata Over a year ago

That;s a great solution. :has() CSS pseudo class can be enabled on Firefox by navigating to about:config in a new window and toggling the ``layout.css.has-selector` attribute to true.

Niet the Dark Absol · Accepted Answer · 2012-01-04 01:21:37Z

0

No, there is nothing like this in CSS. You can, however, use JavaScript to calculate the number of children and apply styles.

answered Jan 4, 2012 at 1:21

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

2 Comments

Gabriel Santos Over a year ago

@Lübnah Can you explain why it is not true?

WebDevPassion Over a year ago

This statement is not true nowaydays as we see working solutions within the up-voted answers and also with the introduction of the :has pseudo-class

4ssassinka · Accepted Answer · 2023-07-24 08:48:42Z

-1

If You want to stylize differently based on child count in specific range,
You can use
(this example counts just span childs not having "hidden" class
if You want less specific selector omit the part after nth-child index)

.selector {
    /* default style for 0 - 9 childs */
}

.selector:has(:nth-child(10 of span:not(.hidden))) {
    /* style for 10 - 19 childs (10th child exists) */
}

.selector:has(:nth-child(20 of span:not(.hidden))) {
    /* style for 20 - 29 childs (20th child exists) */
}

.selector:has(:nth-child(30 of span:not(.hidden))) {
    /* style for 30 and more childs (30th child exists) */
}

answered Jul 24, 2023 at 8:48

4ssassinka

11

Comments

Nadim · Accepted Answer · 2022-08-29 05:17:24Z

-2

If you are using something like reactJS, you can simply add a class and then style it.

e.g. suppose you are displaying items from an array.

app.jsx

<div className={`items-count-is-${items.length}`}>
    {items.map(item => {
       return <li>...</li>;
    })}
</div>

e.g. CSS: items-count-is-5 {...}

answered Aug 29, 2022 at 5:17

Nadim

751 silver badge5 bronze badges

1 Comment

Kees Briggs Over a year ago

You do not want to hard code endless CSS rules to simply accommodate numbers. This solution would be better if you included rules with variable numbers, which are entirely possible using SCSS or the like.

Collectives™ on Stack Overflow

Can CSS detect the number of children an element has?

13 Answers 13

19 Comments

5 Comments

`:only-child`

`:nth-child`

`:empty` and `:not`

2 Comments

3 Comments

1 Comment

Comments

5 Comments

4 Comments

Comments

1 Comment

2 Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

19 Comments

5 Comments

:only-child

:nth-child

:empty and :not

2 Comments

3 Comments

1 Comment

Comments

5 Comments

4 Comments

Comments

1 Comment

2 Comments

Comments

1 Comment

Linked

Related

`:only-child`

`:nth-child`

`:empty` and `:not`