# Formatting Table of Contents

It is possible to format the generated Table of Contents with custom stylesheets. Read more about it [here](/content-exporter-confluence/user-guides/before-exporting/custom-stylesheets.md).

## **Table of Contents selectors**

| Description                                       | CSS selector                | Type  | Variable (#)                                         | Example                                                                   |
| ------------------------------------------------- | --------------------------- | ----- | ---------------------------------------------------- | ------------------------------------------------------------------------- |
| The table of content area                         | table-of-contents           | class | none                                                 | .page.table-of-contents { color: red }                                    |
| Define a hierarchy level                          | cex-toc-container-level-#   | class | The hierarchical level of the container              | <p>.hierarchical .cex-toc-container-level-1 {<br>margin-left: 20px; }</p> |
| In case of a hierarchical export add a level      | cex-toc-container           | class | none                                                 | <p>.hierarchical .cex-toc-container {<br>margin-left: 20px; }</p>         |
| All elements on the hierarchical level            | cex-toc-item-level-#        | class | The hierarchical level of the item                   | .cex-toc-item-level-2 { font-weight: bold; }                              |
| All elements                                      | cex-toc-item                | class | none                                                 | .cex-toc-item { text-decoration: line-through; }                          |
| A page row in the Table of Contents               | cex-toc-ref-to-page         | class | none                                                 | .cex-toc-ref-to-page { text-decoration: line-through; }                   |
| A header row in the Table of Contents             | cex-toc-ref-to-header       | class | none                                                 | .cex-toc-ref-to-header { text-decoration: line-through; }                 |
| The original header level                         | cex-toc-original-header-#   | class | The original header level                            | .cex-toc-original-header-1 { font-size: 16px; }                           |
| The header level in the printed Table of Contents | cex-toc-normalized-header-# | class | The generated header level after header optimization | .cex-toc-normalized-header-2{ font-size: 14px; }                          |
| The ID of each Table of Content rows              | cex-toc-level-#-#-#         | id    | The generated numbering of the row                   | #cex-toc-level-1-2-3 { border: 1px solid; }                               |

## **Content selectors related to Table of Contents**

| Description               | CSS selector     | Type  | Variable                              | Usage example                    |
| ------------------------- | ---------------- | ----- | ------------------------------------- | -------------------------------- |
| Page level                | page-title-lvl-# | class | The hierarchical level of the page.   | .page-title-lvl-0 { color: red } |
| Headers level on the page | toc-header-#     | class | The hierarchical level of the header. | .toc-header-0 { color: red }     |

## **The HTML syntax of a Table of Contents**

```html
<div class='page table-of-contents hierarchical'>
    <h1>Table of Contents</h1>
    <div class="cex-toc-container cex-toc-container-level-1">
        <div class="cex-toc-item cex-toc-item-level-1 cex-toc-ref-to-page" id="cex-toc-level-1">
            <a class="cex-toc-counter" href="#Bookmark1">1. - </a>
            <a class="cex-toc-text" href="#Bookmark1">Table of Contents sample page Home</a>
            <a class="cex-toc-page-number" href="#Bookmark1"></a>
        </div>
        <div class="cex-toc-container cex-toc-container-level-2">
            <div class="cex-toc-item cex-toc-item-level-2 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-1">
                <a class="cex-toc-counter" href="#Bookmark2">1.1. - </a>
                <a class="cex-toc-text" href="#Bookmark2">Heading one</a>
                <a class="cex-toc-page-number" href="#Bookmark2"></a>
            </div>
            <div class="cex-toc-container cex-toc-container-level-2">
                <div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-header cex-toc-original-header-2 cex-toc-normalized-header-2" id="cex-toc-level-1-1-1">
                    <a class="cex-toc-counter" href="#Bookmark3">1.1.1. - </a>
                    <a class="cex-toc-text" href="#Bookmark3">Heading two</a>
                    <a class="cex-toc-page-number" href="#Bookmark3"></a>
                </div>
                <div class="cex-toc-container cex-toc-container-level-3">
                    <div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-3 cex-toc-normalized-header-3"
                         id="cex-toc-level-1-1-1-1">
                        <a class="cex-toc-counter" href="#Bookmark4">1.1.1.1. - </a>
                        <a class="cex-toc-text" href="#Bookmark4">Heading three</a>
                        <a class="cex-toc-page-number" href="#Bookmark4"></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="cex-toc-container cex-toc-container-level-2">
            <div class="cex-toc-item cex-toc-item-level-2 cex-toc-ref-to-page" id="cex-toc-level-1-2">
                <a class="cex-toc-counter" href="#Bookmark5">1.2. - </a>
                <a class="cex-toc-text" href="#Bookmark5">First page in the space</a>
                <a class="cex-toc-page-number" href="#Bookmark5"></a>
            </div>
            <div class="cex-toc-container cex-toc-container-level-3">
                <div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-1">
                    <a class="cex-toc-counter" href="#Bookmark6">1.2.1. - </a>
                    <a class="cex-toc-text" href="#Bookmark6">Heading One</a>
                    <a class="cex-toc-page-number" href="#Bookmark6"></a>
                </div>
                <div class="cex-toc-container cex-toc-container-level-3">
                    <div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-2 cex-toc-normalized-header-2" id="cex-toc-level-1-2-1-1">
                        <a class="cex-toc-counter" href="#Bookmark7">1.2.1.1. - </a>
                        <a class="cex-toc-text" href="#Bookmark7">Heading Two</a>
                        <a class="cex-toc-page-number" href="#Bookmark7"></a>
                    </div>
                    <div class="cex-toc-container cex-toc-container-level-4">
                        <div class="cex-toc-item cex-toc-item-level-5 cex-toc-ref-to-header cex-toc-original-header-3 cex-toc-normalized-header-3" id="cex-toc-level-1-2-1-1-1">
                            <a class="cex-toc-counter" href="#Bookmark8">1.2.1.1.1. - </a>
                            <a class="cex-toc-text" href="#Bookmark8">Heading Three</a>
                            <a class="cex-toc-page-number" href="#Bookmark8"></a>
                        </div>
                    </div>
                </div>
                <div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-2">
                    <a class="cex-toc-counter" href="#Bookmark9">1.2.2. - </a>
                    <a class="cex-toc-text" href="#Bookmark9">Heading One</a>
                    <a class="cex-toc-page-number" href="#Bookmark9"></a>
                </div>
            </div>
            <div class="cex-toc-container cex-toc-container-level-3">
                <div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-page" id="cex-toc-level-1-2-3">
                    <a class="cex-toc-counter" href="#Bookmark10">1.2.3. - </a>
                    <a class="cex-toc-text" href="#Bookmark10">Subpage</a>
                    <a class="cex-toc-page-number" href="#Bookmark10"></a>
                </div>
                <div class="cex-toc-container cex-toc-container-level-4">
                    <div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-3-1">
                        <a class="cex-toc-counter" href="#Bookmark11">1.2.3.1. - </a>
                        <a class="cex-toc-text" href="#Bookmark11">Heading One</a>
                        <a class="cex-toc-page-number" href="#Bookmark11"></a>
                    </div>
                    <div class="cex-toc-container cex-toc-container-level-4">
                        <div class="cex-toc-item cex-toc-item-level-5 cex-toc-ref-to-header cex-toc-original-header-2 cex-toc-normalized-header-2" id="cex-toc-level-1-2-3-1-1">
                            <a class="cex-toc-counter" href="#Bookmark12">1.2.3.1.1. - </a>
                            <a class="cex-toc-text" href="#Bookmark12">Heading Two</a>
                            <a class="cex-toc-page-number" href="#Bookmark12"></a>
                        </div>
                    </div>
                </div>
                <div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-page" id="cex-toc-level-1-2-4">
                    <a class="cex-toc-counter" href="#Bookmark13">1.2.4. - </a>
                    <a class="cex-toc-text" href="#Bookmark13">Subpage with not ordered headers</a>
                    <a class="cex-toc-page-number" href="#Bookmark13"></a>
                </div>
                <div class="cex-toc-container cex-toc-container-level-4">
                    <div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-4-1">
                        <a class="cex-toc-counter" href="#Bookmark14">1.2.4.1. - </a>
                        <a class="cex-toc-text" href="#Bookmark14">Heading One</a>
                        <a class="cex-toc-page-number" href="#Bookmark14"></a>
                    </div>
                    <div class="cex-toc-container cex-toc-container-level-4">
                        <div class="cex-toc-item cex-toc-item-level-5 cex-toc-ref-to-header cex-toc-original-header-3 cex-toc-normalized-header-2" id="cex-toc-level-1-2-4-1-1">
                            <a class="cex-toc-counter" href="#Bookmark15">1.2.4.1.1. - </a>
                            <a class="cex-toc-text" href="#Bookmark15">Heading Three</a>
                            <a class="cex-toc-page-number" href="#Bookmark15"></a>
                        </div>
                        <div class="cex-toc-container cex-toc-container-level-5">
                            <div class="cex-toc-item cex-toc-item-level-6 cex-toc-ref-to-header cex-toc-original-header-5 cex-toc-normalized-header-3" id="cex-toc-level-1-2-4-1-1-1">
                                <a class="cex-toc-counter" href="#Bookmark16">1.2.4.1.1.1. - </a>
                                <a class="cex-toc-text" href="#Bookmark16">Heading Five</a>
                                <a class="cex-toc-page-number" href="#Bookmark16"></a>
                            </div>
                        </div>
                    </div>
                    <div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-4-2">
                        <a class="cex-toc-counter" href="#Bookmark17">1.2.4.2. - </a>
                        <a class="cex-toc-text" href="#Bookmark17">Heading One</a>
                        <a class="cex-toc-page-number" href="#Bookmark17"></a>
                    </div>
                </div>
            </div>
            <div class="cex-toc-item cex-toc-item-level-2 cex-toc-ref-to-page" id="cex-toc-level-1-3">
                <a class="cex-toc-counter" href="#Bookmark18">1.3. - </a>
                <a class="cex-toc-text" href="#Bookmark18">Second page in the space</a>
                <a class="cex-toc-page-number" href="#Bookmark18"></a>
            </div>
            <div class="cex-toc-container cex-toc-container-level-3">
                <div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-3-1">
                    <a class="cex-toc-counter" href="#Bookmark19">1.3.1. - </a>
                    <a class="cex-toc-text" href="#Bookmark19">Heading One</a>
                    <a class="cex-toc-page-number" href="#Bookmark19"></a>
                </div>
            </div>
        </div>
    </div>
</div>
```


---

# 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.meta-inf.hu/content-exporter-confluence/user-guides/before-exporting/export-profiles/table-of-contents/formatting-table-of-contents.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.
