More counters in CSS

Question

I'm having a problem with CSS counters.

I set up two counters: one indexes headings and other indexes images. However, only one works correctly, the other one (for images) shows only number 1 in all image descriptions. You can see the example here

body {
  counter-reset: figcounter;
  counter-reset: head2counter;
}
.fig:before {
  counter-increment: figcounter;
  content: "Fig. " counter(figcounter)": ";
  font-weight: bold;
}
.figreset {
  counter-reset: figcounter;
}
.head2:before {
  counter-increment: head2counter;
  content: counter(head2counter)" ";
}
.head2reset {
  counter-reset: head2counter;
}

<h1>Article title</h1>
<h2 class="head2">Services</h2>
<img src="http://www.google.com/about/company/images/company-products.png" width="200" />
<span class="fig">Google services</span>
<h2 class="head2">E-mail clients</h2>
<h2 class="head2">Others</h2>
<img src="http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png" width="200" />
<span class="fig">Google logo</span>
<br />
<img src="http://thenextweb.com/wp-content/blogs.dir/1/files/2013/02/google_chrome.png" width="200" />
<span class="fig">Chrome</span>

Do you know how to fix it? If there is only one counter, it works correctly. I want to index images independently on headings.

Answer 1

Change from:

body {
      counter-reset: figcounter;
      counter-reset: head2counter;
}

To:

body {
    counter-reset: figcounter head2counter;
}

Why?

Because the counter-reset and counter-increment can be overridden. So if you have to use counter-reset and counter-increment for more than 1 element counter variable, you need to put them on the same declaration for counter-reset and counter-increment, with a space separating them. In this case you only need to put the counter-reset property

---

body {
  counter-reset: figcounter head2counter;
}
.fig:before {
  counter-increment: figcounter;
  content: "Fig. " counter(figcounter)": ";
  font-weight: bold;
}
.figreset {
  counter-reset: figcounter;
}
.head2:before {
  counter-increment: head2counter;
  content: counter(head2counter)" ";
}
.head2reset {
  counter-reset: head2counter;
}

<h1>Article title</h1>
<h2 class="head2">Services</h2>
<img src="http://www.google.com/about/company/images/company-products.png" width="200" />
<span class="fig">Google services</span>
<h2 class="head2">E-mail clients</h2>
<h2 class="head2">Others</h2>
<img src="http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png" width="200" />
<span class="fig">Google logo</span>
<br />
<img src="http://thenextweb.com/wp-content/blogs.dir/1/files/2013/02/google_chrome.png" width="200" />
<span class="fig">Chrome</span>