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.

Updated - added CSS code. Working demo is on jsfiddle.net/jddkucs7 — George
– George, Commented Mar 18, 2015 at 16:06

dippas · Accepted Answer · 2016-05-30 10:14:01Z

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>

RWAM · Accepted Answer · 2015-03-18 16:18:00Z

Hm strange, your fiddle works, if you change your css to:

.fig { counter-increment: figcounter; } .fig:before { content: "Fig. " counter(figcounter) ": "; font-weight: bold; }

Look at the fiddle: https://jsfiddle.net/jddkucs7/2/

But sorry, I have no idea why your fiddle doesn't work. May someone has any suggestions. I would be interested in an explanation too.

Ciao Ralf

Sai · Accepted Answer · 2015-03-18 16:36:05Z

your counter for the figcounter is not correctly keeping the count because it resets the counter after every span. what you want is to have a parent that needs to keep the count.

So in your example , if you enclose the section where you want the counter not to reset inside a div element , then it will work.

Refer the MDN reference for more understanding and if my explanation was as clear as mud.

here is the snippet,

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; }

<body> <h1>Article title</h1> <h2 class="head2 figreset">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 figreset">E-mail clients</h2> <h2 class="head2 figreset">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> </body>

Hope this helps.

Take a look at OP's question here "I want to index images independetly on headings", your answer doesn't match OP needs :)
@dippas - Ok It could work even then. All you have to do is tell the counter to reset. So if we just take the 'div' elements out and just give the class 'figreset' to the header 'h2' elements. that will reset it as well. I will update my answer to reflect that as well
interesting idea to reset index in every section with this method, might be also useful.

Collectives™ on Stack Overflow

More counters in CSS

3 Answers 3

Comments

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Linked

Related