7

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?

phihag
  • 278,196
  • 72
  • 453
  • 469
  • didn't know that something like this exists, it was a good read thanks :) – Alp Jul 26 '11 at 12:04
  • It seems like `target-counters` is what I am after but this doesn't seem to work in any browser (for me at least!) Is there a way to get Chrome to process these? perhaps with an experimental flag or mode? – Lea Hayes Jun 24 '14 at 16:49

1 Answers1

3

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

phihag
  • 278,196
  • 72
  • 453
  • 469