Custom
numbering with section numbers

Question

I have several items in an outline each with similarly formatted section numbers.

Ex:

1.3.1
2.1.1
3.4.5

Is there a way to get my ordered lists to recognize "1.1.1" (and "2.1.1", etc) as the starting point?

So a list of releases would appear something like this:

1.1.1 mumbo jumbo
1.1.2 blah blah
1.1.3 something something

Using something like this as the HTML:

<ol start="1.1.1">
  <li>mumbo jumbo
  <li>blah blah
  <li>something something
</ol>

Is this possible in native HTML/CSS? Obviously the HTML above doesn't work (the iterators revert back to 1, 2, 3).

I found a similar question http://stackoverflow.com/questions/4098195/can-ordered-list-produce-result-that-looks-like-1-1-1-2-1-3-instead-of-just-1 — Mario Kurzweil, Aug 14 '15 at 18:35

score 1 · Accepted Answer · answered Aug 14 '15 at 18:30

See this fiddle

You can do it using CSS counter property

HTML

<ol class="custom">
    <li>mumbo jumbo</li>
    <li>blah blah</li>
    <li>something something</li>
</ol>

CSS

.custom {
    counter-reset: custom;
}
.custom li {
    list-style-type: none;
}
.custom li::before {
    counter-increment: custom;
    content:"1.1." counter(custom)" ";
}

Custom numbering with section numbers

1 Answers1

See this fiddle

Custom
numbering with section numbers