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!

Mickiemickle

Pure HTML doesn't have such a feature, yet. – Imposition

Amit: HTML never will. That's CSS territory. – Charlena

Consider asking this question on doctype.com (via SO FAQ). – Ceria

Well, this is less about design than markup, so this question should be fine here. – Charlena

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? – Alasdair

Answer 1

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

1. 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.
2. You could write some JavaScript to do it after page loading. Won't work with JavaScript turned off, naturally.

3. 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 }
   

Charlena

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? – Oratorical

For posterity, the example is slightly wrong for the question. It should be: LI:before { content: counters(item,".") ". "; counter-increment: item } – Oratorical

Fixed, thanks. Apparently I just copied the wrong example from the spec back then. – Charlena

What if you are to use <ul> somewhere in the document, wont the <li> nested inside take on decimals instead of bullets? – Little

They might. But that can be trivially fixed by changing the selector appropriately. – Charlena