CSS counter fails to increment inside <ul> - css

Question

This question concerns using the CSS counter feature in HTML5 inside a list (e.g. <ul>).
Given this in the .css file:
body {
counter-reset:figCounter;
counter-reset:figRefCounter;
counter-increment: figRefCounter;
}
.caption {
counter-increment: figCounter;
}
.figNumber:before {
content: "Figure";
}
.figNumber:after {
content: counter(figCounter);
}
The example below works correctly, that is, the divs generate "Figure 1" and "Figure 2" respectively:
<div class="caption">
<p><span class="figNumber"> </span>: First Caption</p>
</div>
<div class="caption">
<p><span class="figNumber"> </span>: Second Caption</p>
</div>
On the other hand, the counter does not increment -- both divs end up generating "Figure 1" -- if I put the first div inside a list, like so:
<ul>
<li>
<div class="caption">
<p><span class="figNumber"> </span>: First Caption</p>
</div>
</li>
</ul>
<div class="caption">
<p><span class="figNumber"> </span>: Second Caption</p>
</div>
How can I get the counter to increment inside a list, so that the second div generates "Figure 2" like it does without the list?

Answer 1

When using multiple Counter-resets, you should define them in one line:
body {
counter-reset:figCounter, figRefCounter;
counter-increment: figRefCounter;
}
jsFiddle
Note it is not neccesary to increase the counter at the body, it will be one by default for the first time

Answer 2

Your code as is working just fine.
See this fiddle: http://jsfiddle.net/SrewW
Moreover, if you make the list-style-type to none, then it looks seamless:
See this fiddle: http://jsfiddle.net/SrewW/1/
Result in both cases:
1 : First Caption
2 : Second Caption
And,
If you remove the trailing comma after .figNumber:before, then the result is like this:
Figure 1 : First Caption
Figure 2 : Second Caption
See this fiddle: http://jsfiddle.net/SrewW/2/
Update: (Moving the comments here for easy ref)
You do not actually need to put colons and spaces in your html markup. Also, you do not need counter-increment on caption. You can do that on your fignumber span itself.
Please understand the counters. This link will help you: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters
You can have many counters. You can reset them anywhere, but safe would be to reset in body. But you increment those on an element where you want to show the counter.
Please see this fiddle for reference: http://jsfiddle.net/m6u6a/4/
For example:
body {
counter-reset: figCounter 10 figRefCounter 0;
}
.figNumber:before {
counter-increment: figCounter 2;
content: "Figure " counter(figCounter) ": ";
}
Here, figCounter is initialized to 10 and figRefCounter is initialized to 0 in body. However, on the span with class figNumber, the figCounter is incremented to 2 and displayed with supporting text in the:before` pseudo-class.
The result:
Figure 12: First Caption
Figure 14: Second Caption
Hope that makes it clear to you.