Can you count a particular class with CSS?

Question

Lets say I have a simple list like so:

    
one
    
two
    &l         


        

Answer 1

One solution could be to use CSS counters and apply it using pseudo-element :before taking advance of content property with counter,

Counters may be specified with two different functions: 'counter()' or 'counters()'. The former has two forms: 'counter(name)' or 'counter(name, style)'. The generated text is the value of the innermost counter of the given name in scope at this pseudo-element; it is formatted in the indicated style ('decimal' by default). The latter function also has two forms: 'counters(name, string)' or 'counters(name, string, style)'. The generated text is the value of all counters with the given name in scope at this pseudo-element, from outermost to innermost separated by the specified string. The counters are rendered in the indicated style ('decimal' by default). See the section on automatic counters and numbering for more information. The name must not be 'none', 'inherit' or 'initial'. Such a name causes the declaration to be ignored.

only in li elements with class count:

body {
  counter-reset: section;/* Set the section counter to 0 */
}
ol {
  list-style-type: none;
}
li.count::before {
  counter-increment: section;/* Increment the section counter*/
  content: counter(section)". ";/* Display the counter */
}

  
one
  
two
  
three
  
four
  
blabla
  
five
  
six
  
blabla
  
seven

References

counter-increment

counter-reset