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.

Answer 1

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);}

Example