TOC doesn't work when wrapped with HTML tags

Support
2

I don’t know your purpose, but you can target the titles using several methods.

  1. Use HTML title tags with data-attributes, such as <h1 data-header-1>Chapter 1</h1> so you can target [data-header-1] with CSS.

  2. Insert empty div with a data-attribute aty some point, that you can use to target following elements. For example, putting <div data-next-titles></div> after the 2nd title and adding this CSS:

    [data-next-titles] ~ .d-toc-post-heading {
    color: pink;
}

    Will make this:

    image
    image730×725 32.4 KB

So, it really depends on your goal.
This guide might be of some help: Customize posts' contents with your own styles

4 Likes