0

I'm trying to achieve a css counting for headers. for ex.

<h1>first heading</h1>
<h2>second heading</h2>

will be converted

1. first heading
1.1 second heading

That works fine with the css counter. What doesn't work is when the h2 is a h3. The result will be that the h3 heading will add a "1.0.1" instead of a 1.1.1, because there is no h2 heading so the counter for h2 is 0.

<h1>first heading</h1>
<h3>third heading (should be 1.1.1)</h3>

will be converted

1. first heading
1.0.1 third heading (should be 1.1.1)

Any suggestion how to solve this (is it even possible)

ps. an example for the headings can be found here http://jsfiddle.net/6xpveu0t/

1
  • why do you skip headline-2 ?
    – dsuess
    Jun 18, 2015 at 20:30
0

Please use headlines in semantically correct way.

In the earlier days, people rather misused different headline-tags to suit their design, rather than styling them correctly as it is done today (hopefully everywhere).

In terms of semantic usage of headlines, a headline 1 is always followed by a headline 2 followed by a headline 3. You may refer to w3c school about headline priority.

In printed books, you will never find a nested subchapter inside a skipped chapter. Therefore the CSS counter is correct.

Nevertheless you can include an empty <h2></h2>.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.