CODEWITHSUNDEEP
css
BenEgan1991
BenEgan1991

Reputation: 637

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

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.

Upvotes: 9

Views: 8975

Answers (1)

Pete
Pete

Reputation: 58432

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

Upvotes: 13

Related Questions