Achieving sub numbering on ol items html

Question

Im not sure what its called but is it possible to achieve the format of:

1.

1.1

1.2

1.2.1

1.2.2

1.3

I think thats all, thanks!

Consider asking this question on http://doctype.com (via SO FAQ). — Mike Atlas, Jan 13 '10 at 17:05
Well, this is less about design than markup, so this question should be fine here. — Joey, Jan 13 '10 at 17:32
Possible duplicate of [Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css?](https://stackoverflow.com/questions/4098195/can-ordered-list-produce-result-that-looks-like-1-1-1-2-1-3-instead-of-just-1) — Kay V, Jan 04 '18 at 12:08

score 19 · Accepted Answer · edited Apr 21 '15 at 13:22

19

Several options, in fact, varying in robustness and support:

Do this in the code that generates the lists. Provided it is generated HTML, after all. Wikipedia does that, for example for their section numbers.
You could write some JavaScript to do it after page loading. Won't work with JavaScript turned off, naturally.
Or you can turn to CSS counters. This is probably the best option, if you don't need to support legacy versions of IE, where it is supported since version 8.
Counters are "self-nesting", in the sense that resetting a counter in a descendant element or pseudo-element automatically creates a new instance of the counter. This is important for situations like lists in HTML, where elements can be nested inside themselves to arbitrary depth. It would be impossible to define uniquely named counters for each level.

Example(s):

Thus, the following suffices to number nested list items. The result is very similar to that of setting 'display:list-item' and 'list-style: inside' on the LI element:
```
OL { counter-reset: item }
OL>LI { display: block }
OL>LI:before { content: counters(item, ".") ". "; counter-increment: item }
```

edited Apr 21 '15 at 13:22

Tim Ogilvy

answered Jan 13 '10 at 16:57

Joey

1

I know this is a fairly old answer, but I'm curious if I'm missing something. I know the spec says this: "The following style sheet numbers nested list items as "1", "1.1", "1.1.1", etc." But as I say in my answer that's not what I'm seeing. Is the example wrong, or are IE10 and Firefox both wrong? – OlduwanSteve Jul 12 '13 at 10:36
3

For posterity, the example is slightly wrong for the question. It should be: LI:before { content: counters(item,".") ". "; counter-increment: item } – OlduwanSteve Jul 17 '13 at 12:10
1

Fixed, thanks. Apparently I just copied the wrong example from the spec back then. – Joey Sep 16 '13 at 12:20
1
What if you are to use
- nested inside take on decimals instead of bullets?
– drleifz Jan 13 '15 at 11:56
They might. But that can be trivially fixed by changing the selector appropriately. – Joey Jan 13 '15 at 19:55

1 Answers1