Can you count a particular class with CSS?

Question

Lets say I have a simple list like so:

<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> 

Now I only want to number list items with the class 'count'

So If I add the CSS:

li {     list-style-type: decimal; } 

and then remove the list-style-type for list items without the class:

li:not(.count) {     list-style-type: none; } 

I get this:

FIDDLE

li {   list-style-type: decimal; } li:not(.count) {   list-style-type: 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>

The obvious problem here is that the list items without the class are also 'counted' here, just not shown.

So in the above example, the list should be numbered to 7 - with the numbering skipping the list items without the class. Can this be done with CSS?

Answer 1

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>