21. Simple, fast, purely declarative counters

Standard CSS counters, that is counter-reset, counter-increment, counter() and counters(), are fully supported by XXE. However, for most uses, we also have a simpler, faster because purely declarative, alternative to standard CSS counters.

Proprietary simple-counter() and simple-counters() may be used everywhere you use counter() and counters() and this, with a similar syntax: simple-counters(n, "."), simple-counter(n, upper-roman), etc. But, being purely declarative, you don't need to specify simple-counter-reset or simple-counter-increment in order to declare and update them.

Just like counter and counters, simple-counter and simple-counters are supported inside the content property. However their semantics are very different: the name of the counter specifies the non-formatted value of the counter.

Example 1 (XHTML):

ol > li:before {
    display: marker;
    content: simple-counter(n, decimal);
    font-weight: bold;

In the previous example, the counter name is n (single letter 'n', any letter is OK) which specifies that the counter value is the rank of li within its parent element (an ol).

Example 2 (DocBook):

sect3 > title:before {
    content: simple-counter(nnn-) " ";

In the previous example, the counter name is nnn- (3 letters followed by a dash) which specifies that the counter segmented value must be built as follows:

  1. Skip (dash means skip) the rank of title within its parent element (a sect3).

  2. Prepend (any letter means use) the rank of title parent (a sect3) within its parent (a sect2).

  3. Prepend the rank of title grand-parent (a sect2) within its parent (a sect1).

  4. Prepend the rank of title grand-grand-parent (a sect1) within its parent (an article or a chapter).