Im having a problem with my counter that im using to get numbers before h3, h4 and h5, like a list. The number should only be visible if the tag has class="count", and its only then it should counter-reset for the header below.
When i skip showing the number on a h3 the h4s counter gets messed upp, and same for skipping h4. Does anyone have any idea 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
As per your CSS code for the counter, the value of h5
counter should be reset whenever you encounter an h4
tag.
body {counter-reset: h3}
h3 {counter-reset: h4}
h4 {counter-reset: h5} /* this one */
Because of the above code, when the browser encounters the h4
tag with no class (and content as No Counter ) the counter value of h5
counter gets reset back to 0. This is the reason why instead of 1.1.3 you had got the value as 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, what you actually need is to reset the counter only when the heading tags have class="count"
. Hence, modifying the counter-reset CSS code like below should solve the problem.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.