How to setup counters for target-counters

Question

In paged media, the CSS property target-counters can be used to include multiple counters. The spec gives the following example (simplified):

a::after {
 content: "see section " target-counters(attr(href, url), section, ".")
}

that should output something like (see section 1.3.5).

How would I set up the section counter?

Answer 1

From the Generated Content Module (for non-paged content, too):

Counters are "self-nesting", in the sense that re-using a counter in a child element automatically creates a new instance of the counter.

Therefore, you can just write

<style type="text/css">    
section {counter-increment: section;}
</style>

<section id="foo">
<h1>Root level</h1>
    <section id="bar">
    <h2>Sub Level</h2>
    </section>
</section>

There is no way to use nested counters if your element tree is flat (as in <h1>Root</h1><h2>Sub</h2>).