CODEWITHSUNDEEP
csshtmlcounter
user1147171
user1147171

Reputation: 1243

CSS counter fails to increment inside <ul>

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">&nbsp;</span>:&nbsp;First Caption</p>
</div>
<div class="caption">
  <p><span class="figNumber">&nbsp;</span>:&nbsp;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">&nbsp;</span>:&nbsp;First Caption</p>
    </div>
  </li>
</ul>
<div class="caption">
  <p><span class="figNumber">&nbsp;</span>:&nbsp;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?

Upvotes: 0

Views: 717

Answers (2)

nkmol
nkmol

Reputation: 8091

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

Upvotes: 3

Abhitalks
Abhitalks

Reputation: 28387

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.

Upvotes: 0

Related Questions