counter counting selectors

by danield770

HTML

<div class="wpr">div1
    <div class="container">div2
        <div>div3
            <span class="count-me">count-me</span>
        </div>
        <div>div4
            <span class="count-me">count-me</span>
            <p>I"m a paragragh</p>
        </div>
        <div>div5
            <p>I"m a paragragh</p>
        </div>
        <div>div6
            <span class="count-me">count-me</span>
        </div>
        <div>div7
            <span class="count-me">count-me</span>
            <p>I"m a paragragh</p>
        </div>
        <div>div8</div>
    </div>
</div>

CSS

html {
    counter-reset: divs;
}
body {
    counter-reset: paragraphs;
    position: relative;
}
div {
    counter-increment: divs;
}
.wpr {
    counter-reset: count-me;
    position: relative;
}
.container {
    position: relative;
    border-bottom: 1px solid green;
}
.container .count-me {
    counter-increment: count-me;
}
.container p {
    counter-increment: paragraphs;
}
.wpr:after {
    content: "Number of count-me classes in container:"  counter(count-me);
    position: absolute;
    bottom: -20px;
}
.container:after {
    content: "Number of paragraphs:" counter(paragraphs);
    position: absolute;
    bottom:-40px;
}
body:after {
    content: "Number of divs:" counter(divs);
    position: absolute;
    bottom:-60px;
}