How to set up counters for target counters

Question

In page-by-page format, the CSS target-counters property can be used to include multiple counters. The specification gives the following example (simplified):

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

which should output something like (see section 1.3.5) .

How to set up a section counter?

Answer 1

From the Generated Content Module (for content without paginated content too):

Counters are "self-tuning" in the sense that reusing a counter in a child automatically creates a new counter instance.

So 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> 

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