Use CSS Counter with Looped Elements?

Having an automatic counter is usefull for looped elements so you don’t have to go in and change numbers manually if you are adding more loops.

I am wondering if there is any way to use a CSS counters on elements that are within a loop to get an automatic numbering. I am talking about a CSS counter along these lines:

.parent {
	counter-reset:css-counter 0;

.child {
counter-increment: css-counter 1; /* Increase the counter by 1. */
content: counter(css-counter) ". "; /* Apply counter before children's content. */

In my attempt to do that I am just getting a repeating 1 instead of increments, it looks like this - see screen recording video. I guess because each looped element thinks it is alone and thus the count does not go up… is there any workaround to this?