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/
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>
.