How to Style the Table of Contents Entries

Note: Each of the items from the table of contents is an element that has the map/topicref class.

The following example uses the italic font for the label and changes the color and style of the connecting line between the title and the page number.

In your customization css, add the following two selectors:

/* The toc item label - the topic title */
*[class ~= "map/topicref"] *[class ~= "topic/navtitle"] {
    font-style:italic;
    color: navy;
}

/* The dotted line between the topic name and the page number. */
*[class ~= "map/topicref"] *[class ~= "topic/navtitle"]:after {
    content: leader('-') target-counter(attr(href), page);
    color: navy;
}

And if you need to alter the indent of the nested table of content items, use the following selector:

*[class ~= "map/topicref"] *[class ~= "map/topicref"] {
    margin-left: 1em;
}

The numbers can be styled like this:

*[class ~= "map/topicref"] > *[class ~= "map/topicmeta"]:before,
*[class ~= "map/topicref"] 
    > *[class ~= "map/topicmeta"] > *[class ~= "topic/navtitle"]:before{
  color:blue;
}

The following is an example of customizing the font size for the items representing chapters. The chapters are level one topics and are marked in the merged DITA document TOC with the attribute @is-chapter.

*[class ~= "map/topicref"][is-chapter = "true"]  > *[class ~= "map/topicmeta"] > *[class ~= "topic/navtitle"]{
  font-size:2em; 
}