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

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>