How to count total number of divs with in a div using CSS

Question

Is there a way to count the total number of divs within a div using CSS?

So far I have developed a solution using JavaScript.

$('#nextPrev > div').length

But I just wondered whether this is possible to do via CSS.

There is no way to count or perform tasks like this in CSS. You can select elements and apply style rules to them. You will have to use Javascript for this. — Kyle
– Kyle, Commented Jun 2, 2014 at 10:04

Pete · Accepted Answer · 2014-06-02 10:14:26Z

13

You can use a css counter to get the count. Consider the following html:

<div id="test">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div id="result"></div>

You can display the count using the following css:

#test {counter-reset:test;}
#test > div {counter-increment:test;}
#result:before {content:counter(test);}

answered Jun 2, 2014 at 10:14

Pete

58.8k31 gold badges132 silver badges187 bronze badges

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

1 Comment

I completely forgot about the counter.