Skip to content Skip to sidebar Skip to footer
Home / Css / Css Counter / Html

More Counters In Css

Post a Comment
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 on

Solution 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><h2class="head2">Services</h2><imgsrc="http://www.google.com/about/company/images/company-products.png"width="200" /><spanclass="fig">Google services</span><h2class="head2">E-mail clients</h2><h2class="head2">Others</h2><imgsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeCkzy4bGLLso2jUvqVxHhIoXJeVCRFoejuadygmj-xuPPX6yVfEcYIyTKT4f_AJHwxKQX2ODaYRI-WRnZ0aoDF61KyJJVdmGEbIzBRFI941knxrvQrzbWGBQwWpqBAHt_oFe4o4Mbd3E/s1600/google-logo-874x288.png"width="200" /><spanclass="fig">Google logo</span><br /><imgsrc="http://thenextweb.com/wp-content/blogs.dir/1/files/2013/02/google_chrome.png"width="200" /><spanclass="fig">Chrome</span>

Solution 2:

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

Solution 3:

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><h2class="head2 figreset">Services</h2><imgsrc="http://www.google.com/about/company/images/company-products.png"width="200" /><spanclass="fig">Google services</span><h2class="head2 figreset">E-mail clients</h2><h2class="head2 figreset">Others</h2><imgsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeCkzy4bGLLso2jUvqVxHhIoXJeVCRFoejuadygmj-xuPPX6yVfEcYIyTKT4f_AJHwxKQX2ODaYRI-WRnZ0aoDF61KyJJVdmGEbIzBRFI941knxrvQrzbWGBQwWpqBAHt_oFe4o4Mbd3E/s1600/google-logo-874x288.png"width="200" /><spanclass="fig">Google logo</span><br /><imgsrc="http://thenextweb.com/wp-content/blogs.dir/1/files/2013/02/google_chrome.png"width="200" /><spanclass="fig">Chrome</span></body>

Hope this helps.

Post a Comment for "More Counters In Css"