CODEWITHSUNDEEP
css
Victoria
Victoria

Reputation: 505

CSS counter-reset

I'm having trouble understanding why some counters work, and some do not. In the following HTML, the goal is that the cnt3 style is used to create a table of contents list using <h3>, that matches subsequent <h2> headers. And I want the numbering in the table of contents to match the numbering of the <h2> headers. And I'm trying to use CSS counters to do it, and mostly it is working, but it seems my h3s counter for the table of contents, is either not getting incremented, or is getting reset too often, but I can't tell why, nor have I figured out how to debug this... Mozilla Firebug seems to tell me the counter-increment is getting used in the right places, but it seems to have no effect on the numbering. Obviously, this is a stripped example, just to demonstrate the problem, which appeared in a much larger document.

HTML

<h1>H1 Title</h1>
<h2>H2 Title</h2>
<h3 class="cnt3">H3 1</h3>
<h3 class="cnt3">H3 2</h3>
<h3 class="cnt3">H3 3</h3>
<h2 class="cnt">H2 Title 2</h2>
<h3 class="top">H3 4</h3>
<h3 class="top">H3 5</h3>
<h3 class="top">H3 6</h3>
<h2 class="cnt">H2 Title 3</h2>

CSS

h1 {
    counter-reset: h2s;
    text-align: center;
    font-size: 24pt;
}
h2 {
    font-size: 20pt;
    counter-reset: h3s;
    counter-reset: h3t;
}
h3 {
    font-size: 16pt;
    counter-reset: h4t;
}
h2.cnt:before {
    content: 'Section ' counter( h2s, decimal ) ': ';
    counter-increment: h2s;
}
h3.cnt3:before {
    content: 'Section ' counter( h3s, decimal ) ': ';
    counter-increment: h3s;
}
h3.top:before {
    font-size: 16pt;
    content: counter( h2s, decimal ) '.' counter( h3t, decimal ) ': ';
    counter-increment: h3t;
}
h4 { font-size: 13pt; }
h4.top:before {
    font-size: 16pt;
    content: counter( h2s, decimal ) '.' counter( h3t, decimal ) '.' counter( h4t, decimal ) ': ';
    counter-increment: h4t;
}

Problem happens in both Firefox and Chrome, so I suppose it is my code rather than the same bug in both browsers!

Upvotes: 1

Views: 2023

Answers (1)

Fico
Fico

Reputation: 2407

You are not using the method as it should be used.

Cascade rules runs also for this property. So here ....

h2 {
    font-size: 20pt;
    counter-reset: h3s;
    counter-reset: h3t;
    }

your second definition of the property overrides the previous.

When you reset 2 counters for the same element they should be specified together as I show below

Your h2 rules should look as follows

h2 {
    font-size: 20pt;
    counter-reset: h3s h3t;
}

Here you have a JSBin working fine

Upvotes: 4

Related Questions