# Page counters

Print-CSS defines two special counters, `page` and `pages`, which can be used to display the current page number and the total number of pages, respectively. For example, the following code will display the current and total page numbers at the bottom right of each page:

```css
@page {
    size: A4;
    margin: 20mm;

    @bottom-right {
        content: 'Page: ' counter(page) ' of ' counter(pages);
        font-size: 0.7em;
    }
}
```

{% embed url="<https://typeset.sh/en/live-demo/page-counter>" %}

### Manipulating the page counter

The `page` and `pages` counters can both be manipulated, but only within the `@page` at-rule context. For instance, in the following example, the first page is a cover page, so it is not included in the page numbering. To achieve this, we reset the `page` and `pages` counters to -1 so that they will start counting from the beginning on the next page:

```css
@page:first {
    size: A4;
    counter-reset: page -1 pages -1;
    @bottom-right {
        content: none;
    }
}
```

Keep in mind that these counters can only be manipulated within the `@page` at-rule context.

### Target page counter

You can use the `target-counter` function to retrieve the page number of an element and display it as part of your content. A common use case for this is creating a table of contents (TOC).

Here is an example of how you can use the `target-counter` function to retrieve the page number for the element that a link (specified by the `href` attribute) points to:

```css
#toc a::after {
    content: ' (' target-counter(attr(href url), page) ')';
}
```

{% code title="HTML table of content code" %}

```html
<ol id="toc">
    <li><a href="#topic-1">Lorem ipsum dolor</a></li>
    <li><a href="#topic2-">Stet clita kasd</a></li>
</ol>
```

{% endcode %}

<figure><img src="/files/sdg24jmb8HT3CiWrKyff" alt=""><figcaption></figcaption></figure>

{% embed url="<https://typeset.sh/en/live-demo/toc>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.typeset.sh/setup/css-and-paged-media/page-counters.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.