[solved] CSS Counters for nested lists and sections

Destry · 2018-09-06 08:53:58

I’m trying to create a two-level TOC in ordered-list fashion. (There will not be a third level in my needs but maybe in your needs, theoretically):

<ol class="toc1">
  <li>...</li>
  <li>...</li>
    <ol class="toc2">
        <li>...</li>
        <li>...</li>
    </ol>
  <li>...</li>
</ol>

The first level, toc1, should lead with a 0 and begin at 00. The second level, toc2, should begin as a decimal at 1 (i.e. n.1), exactly like this:

00 item
01 item
02 item
     2.1 item
     2.2 item
03 item
etc

My scope is limited: toc1 won’t reach 10, let alone 100, so I’m not worried about things like 010 and 0100 happening. And toc2 will never go beyond n.9, so I’m not worried about things like n.10, n.101, etc. And of course there’s no third level so no need to worry about item like n.1.1, etc.

I could easily use list-style-type:decimal-leading-zero; on toc1 except it doesn’t (re)start at 00, and it auto-adds the trailing point (i.e. 01.). Thus I know I’ll need to use counters, including reset and increment, at both levels of the rules, but I can’t get my head around the examples there.

If I understand what the spec is saying about negatives (and I probably don’t), the first ol elements of each level must get the reset value of -1 (=0), so that the first child in each case begins with 1. But maybe I misunderstand that. After that I don’t know what the heck is going on there.

Anyone have experience in this area? I’m looking at examples on Stack Exchange too and they’re no more clear to me than these specs are.

Destry · 2018-09-06 09:13:06

That said, I never thought about using counters on article chapters and sections before, as they also show in the specs. That’s interesting. So I guess you can apply them to h1 (etc), section, or whatever was expected to be in a series.

jakob · 2018-09-06 09:18:00

How about this example of nested counter on the mozilla developer docs page?

If you open the “codepen” at the end of the article and then modify the css to:

ol {
  counter-reset: section;                /* Creates a new instance of the
                                            section counter with each ol
                                            element */
  list-style-type: none;
}

li::before {
  counter-increment: section;            /* Increments only this instance
                                            of the section counter */
  content: "0" counters(section, ".") " ";   /* Combines the values of all instances
                                            of the section counter, separated
                                            by a period */
}
li li::before {
  counter-increment: section;            /* Increments only this instance
                                            of the section counter */
  content: counters(section, ".") " ";   /* Combines the values of all instances
                                            of the section counter, separated
                                            by a period */
}

It does, I think, what you want. Essentially, it’s exactly their example with "0" tacked in front, and then a second CSS directive without the zero for the nested list items.

phiw13 · 2018-09-06 09:23:24

I and short of time to write it up, but see if you can use these old examples.

Destry · 2018-09-06 09:26:21

Quickly testing the MDN one, I only needed to add -1 right here…

ol { counter-reset: section -1;

That handled the numbering perfectly.

I might need to fiddle with spacing. We’ll see.

I’ll look at yours too, phi!

Thanks both.

Destry · 2018-09-06 09:52:31

This is what I’m using for preference:

/* ToC listing */

/* Reset each ol (section) to '-1' so first child item is '1' */
.toc1, .toc2 {
  counter-reset: section -1;                
  list-style-type: none;
}

.toc1 {padding-left: 0;}

/* Increments toc1 items only and combines digits for each item, separated by a period. */
.toc1 li::before {
  counter-increment: section;
  content: "0" counters(section, ".") " "; 
}

/* Increments toc2 items only and combines digits for each item, separated by a period. */
.toc2 li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
}

Note you need to specify which list items explicitly with the selector (unlike the MDN example) or all other lists on the page are affected by the increment rules.

Now if I can figure out how to add a selector to the body element for that article only, I could do the same thing for the corresponding numbering on the article headers too.

NicolasGraph · 2018-09-06 09:56:26

Destry wrote #313847:

I’m trying to create a two-level TOC in ordered-list fashion. (There will not be a third level in my needs but maybe in your needs, theoretically) […]

Would that help?

Destry · 2018-09-06 09:57:56

NicolasGraph wrote #313856:

Would that help?

Fashionably late. ;)

NicolasGraph · 2018-09-06 10:01:27

Destry wrote #313857:

Fashionably late.

Ok, but with your code above you will have 09, 010 I think; won’t you?

Destry · 2018-09-06 10:02:50

Oh, maybe. I didn’t check that. My ToC won’t go that high. But that’s a perfectly good thing to be aware of. Thanks!

NicolasGraph · 2018-09-06 10:04:50

Destry wrote #313859:

Oh, maybe. I didn’t check that. My ToC won’t go that high. […]

Destry wrote #313847:

My scope is limited: toc1 won’t reach 10 […]

Ah, yes…

Last edited by NicolasGraph (2018-09-06 10:06:32)

Destry · 2018-09-06 10:19:01

I’m using your rules, Nicolas. They’re nice and clean. ;)
That trick of adding decimal-leading-zero in the counter is nifty!

Thanks!

Textpattern CMS

Textpattern CMS support forum

#1 2018-09-06 08:53:58