Css counter-increment unwanted reset when skipping: to

Question

I have a problem with my counter, which I used to get numbers up to h3, h4 and h5, as a list. The number should be visible only if the tag has class = "count", and only then it should meet reset for the header below.

When I skip showing the number on h3, the h4s counter gets messed upp, and the same for skipping h4. Does anyone know why?

body { counter-reset: h3 } h3 { counter-reset: h4 } h4 { counter-reset: h5 } h3.count:before { counter-increment: h3; content: counter(h3) ". " } h4.count:before { counter-increment: h4; content: counter(h3) "." counter(h4) ". " } h5.count:before { counter-increment: h5; content: counter(h3) "." counter(h4) "." counter(h5) ". " } h3:before, h4:before, h5:before { content: ""; counter-increment: none } 

 <h3 class="count">: should be : 1</h3> <h4 class="count">: should be : 1.1</h4> <h5 class="count">: should be : 1.1.1</h5> <h5>No counter</h5> <h5 class="count">: should be : 1.1.2</h5> <h4>No counter</h4> <h5 class="count">: should be : <span style="color: #ff0000">1.1.3</span></h5> <h5>No counter</h5> <h5 class="count">: should be : <span style="color: #ff0000">1.1.4</span></h5> <h4 class="count">: should be : 1.2</h4> <h3>No counter</h3> <h4 class="count">: should be : <span style="color: #ff0000">1.3</span></h4> <h5 class="count">: should be : <span style="color: #ff0000">1.3.1</span></h5> <h5>No counter</h5> <h5 class="count">: should be : <span style="color: #ff0000">1.3.2</span></h5> <h4>No counter</h4> <h5 class="count">: should be : <span style="color: #ff0000">1.3.3</span></h5> <h5>No counter</h5> <h5 class="count">: should be : <span style="color: #ff0000">1.3.4</span></h5> <h4 class="count">: should be : <span style="color: #ff0000">1.4</span></h4> <h3 class="count">: should be : 2</h3> <h5 class="count">: should be : 2.0.1</h5> <h4 class="count">: should be : 2.1</h4> <h5 class="count">: should be : 2.1.1</h5> <h5>No counter</h5> <h5 class="count">: should be : 2.1.2</h5> 

CSS

 body {counter-reset: h3} h3 {counter-reset: h4} h4 {counter-reset: h5} h3.count:before { counter-increment: h3; content: counter(h3) ". "} h4.count:before { counter-increment: h4; content: counter(h3) "." counter(h4) ". "} h5.count:before { counter-increment: h5; content: counter(h3) "." counter(h4) "." counter(h5) ". "} h3:before, h4:before, h5:before{ content: ""; counter-increment: none } 

HTML

 <h3 class="count">: should be : 1</h3> <h4 class="count">: should be : 1.1</h4> <h5 class="count">: should be : 1.1.1</h5> <h5>No counter</h5> <h5 class="count">: should be : 1.1.2</h5> <h4>No counter</h4> <h5 class="count">: should be : 1.1.3</span></h5> <h5>No counter</h5> <h5 class="count">: should be : 1.1.4</span></h5> <h4 class="count">: should be : 1.2</h4> 

result

 1. : should be : 1 1.1. : should be : 1.1 1.1.1. : should be : 1.1.1 No counter 1.1.2. : should be : 1.1.2 No counter 1.1.1. : should be : 1.1.3 No counter 1.1.2. : should be : 1.1.4 1.2. : should be : 1.2 

Code: http://jsfiddle.net/6gj2r1jd/

Answer 1

According to your CSS code for the counter, the value of the h5 counter should be reset when you encounter the h4 tag.

 body {counter-reset: h3} h3 {counter-reset: h4} h4 {counter-reset: h5} /* this one */ 

Due to the above code, when the browser encounters the h4 tag without a class (and the content is like No counter ), the counter value h5 counter gets reset back to 0. That is why instead of 1.1.3 you got the value 1.1.1

 <h5 class="count">: should be : 1.1.2</h5> <h4>No counter</h4> <!-- This line would cause h5 counter to reset --> <h5 class="count">: should be : 1.1.3</span></h5> 

If my understanding of your question is correct, then you really need to reset the counter only if the header tags have class="count" . Therefore, to fix the problem, you need to change the CSS reset code, as shown below.

 h3.count {counter-reset: h4} h4.count {counter-reset: h5} 

 body { counter-reset: h3 } h3.count { counter-reset: h4 } h4.count { counter-reset: h5 } h3.count:before { counter-increment: h3; content: counter(h3)". " } h4.count:before { counter-increment: h4; content: counter(h3)"." counter(h4)". " } h5.count:before { counter-increment: h5; content: counter(h3)"." counter(h4)"." counter(h5)". " } h3:before, h4:before, h5:before { content: ""; counter-increment: none } 

 <h3 class="count">: should be : 1</h3> <h4 class="count">: should be : 1.1</h4> <h5 class="count">: should be : 1.1.1</h5> <h5>No counter</h5> <h5 class="count">: should be : 1.1.2</h5> <h4>No counter</h4> <h5 class="count">: should be : <span style="color: #ff0000">1.1.3</span></h5> <h5>No counter</h5> <h5 class="count">: should be : <span style="color: #ff0000">1.1.4</span></h5> <h4 class="count">: should be : 1.2</h4> <h3>No counter</h3> <h4 class="count">: should be : <span style="color: #ff0000">1.3</span></h4> <h5 class="count">: should be : <span style="color: #ff0000">1.3.1</span></h5> <h5>No counter</h5> <h5 class="count">: should be : <span style="color: #ff0000">1.3.2</span></h5> <h4>No counter</h4> <h5 class="count">: should be : <span style="color: #ff0000">1.3.3</span></h5> <h5>No counter</h5> <h5 class="count">: should be : <span style="color: #ff0000">1.3.4</span></h5> <h4 class="count">: should be : <span style="color: #ff0000">1.4</span></h4> <h3 class="count">: should be : 2</h3> <h5 class="count">: should be : 2.0.1</h5> <h4 class="count">: should be : 2.1</h4> <h5 class="count">: should be : 2.1.1</h5> <h5>No counter</h5> <h5 class="count">: should be : 2.1.2</h5>