I am trying to get the hang of CSS counters but seems like I am not able to make sense of it.
Here is a minimal example I hava:
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: chapter;
counter-reset: section;
counter-reset: theorem;
}
.outline-1 {
counter-increment: chapter ;
}
span[class^="section-number"] {
counter-increment: section ;
}
.theorem:before {
counter-increment: theorem;
content: "Theorem " counter(chapter) "." counter(section) "." counter(theorem) ": ";
}
</style>
</head>
<body>
<div id="outline-container-sec-1-2" class="outline-1">
<h3 id="sec-1-2"><span class="section-number-1">1.2</span> Basic</h3>
<div class="theorem"> Very important theorem! </div></div>
<div id="outline-container-sec-1-2" class="outline-1">
<h3 id="sec-1-2"><span class="section-number-2">1.2</span> Some Combinatorics</h3>
<div class="theorem"> Very important theorem! </div></div>
</body>
</html>
The result I get is:
1.1 Basic
Theorem 1.0.1: Very important theorem!
1.2 Some Combinatorics
Theorem 2.0.2:Very important theorem!
Why the second counter stays at 0? Why can I count the span elements?
