This can be done with CSS-counters
If I set display:none on the generated content with the counter, the counter skips over it, and continues to the next item!
FIDDLE
(Edit: Or, alternatively – as others have pointed out – we could increment the counter only on the elements with the particular class – like so)
ol {
counter-reset: count;
list-style-type: none;
padding-left: 30px;
}
li:before {
content: counter(count)".";
counter-increment: count;
}
li:not(.count) {
padding-left: 13px;
}
li:not(.count):before {
display: none;
}<ol>
<li class="count">one</li>
<li class="count">two</li>
<li class="count">three</li>
<li class="count">four</li>
<li>blabla</li>
<li class="count">five</li>
<li class="count">six</li>
<li>blabla</li>
<li class="count">seven</li>
</ol>So actually, with counters, not only can we count classes, we can also count any selector combination.
Here’s an example for proof of concept:
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;
}<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>