CODEWITHSUNDEEP
htmlcss
Aleksandr Vinokurov
Aleksandr Vinokurov

Reputation: 306

CSS counter-reset does not work in div-s

I'm struggling to add numbered section in the PDF export in Confluence.

I can set almost any CSS style, but I can't trigger HTML at all.

Here is my CSS:

body {
  counter-reset: x-chap x-sec;
}

h1:before {
  content: counter(x-chap) '. ';
  counter-increment: x-chap;
}

h1 {
    counter-reset: x-sec;
}

h2:before {
  content: counter(x-chap) '.' counter(x-sec) ' ';
  counter-increment: x-sec;
}

And here is the structure of the HTML document -- it is meshed with div-s and they fails my CSS to work, I don't know why:

<body>
        <div>
            <h1>H1-1</h1>
        </div>
        <div>
                <h2>H2-1</h2>   <!-- renders right: 1.1 H2-1 //-->
        </div>
        <div>
                <h2>H2-2</h2>   <!-- renders right: 1.2 H2-2 //-->
        </div>
        <h1>H1-2</h1>
            <h2>H2-1</h2>       <!-- renders right: 2.1 H2-1 //-->
            <h2>H2-2</h2>       <!-- renders right: 2.2 H2-2 //-->
        <div>
            <h1>H1-3</h1>
        </div>
        <div>
                <h2>H2-1</h2>   <!-- renders wrong: 3.3 H2-1 //-->
        </div>
        <div>
                <h2>H2-2</h2>   <!-- renders wrong: 3.4 H2-1 //-->
        </div>
        <h1>H1-2</h1>
            <h2>H2-1</h2>       <!-- renders right: 4.1 H2-1 //-->
            <h2>H2-2</h2>       <!-- renders right: 4.2 H2-2 //-->
</body>

And the problem is that in positions 3.1 and 3.2 H2's are rendered as 3.3 and 3.4.

Please check this in JS Fiddle: http://jsfiddle.net/9pJdS/2/

Upvotes: 4

Views: 1100

Answers (2)

Aleksandr Vinokurov
Aleksandr Vinokurov

Reputation: 306

I've recently found that this behaviour is defined in CSS standard.

In short: the counter-reset function creates a new instance of the counter and store it in the parent element. That's why when the enclosing div is closed -- the instance is gone (removed from the stack of instances of this counter) and we see an old value.

As for the Confluence: I've issued an improvement https://jira.atlassian.com/browse/CONF-33241

Upvotes: 5

Alex
Alex

Reputation: 9031

Your code for 2.x and 3.x don't match, try:

<h1>H1-2</h1>
    <h2>H2-1</h2>
    <h2>H2-2</h2>
<h1>H1-3</h1>
    <h2>H2-1</h2>
    <h2>H2-2</h2>

Upvotes: 0

Related Questions