rinold rinold - 6 months ago 27
CSS Question

How to order list which produce result that starts from 1.1, 1.2, 1.3 (instead of just 1, 2, 3) with css and html

How to order list which produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, …) with css and html ?

So far getting output as,

enter image description here

for the below code,

HTML:

<ol>
<li>Lorem ipsum.</li>
<li>Excepteur sint occaecat cupidatat non proident:
<ol>
<li>sunt in culpa qui officia,</li>
<li>deserunt mollit anim id est laborum.</li>
</ol>
</li>
<li>Ut enim ad minim veniam.
<ol>
<li>Quis nostrud exercitation.</li>
<li>Ullamco laboris nisi ut.
<ol>
<li>
Duis aute irure dolor
</li>
</ol>
</li>
</ol>
</li>




CSS:

ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}

li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}

li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 0.6em;
}

li li {
margin: 0;
}

li li:before {
content: counters(item, ".") " ";
}


But i need to get the result as,

enter image description here

JSfiddle

Answer

Just modify your HTML to have all your list inside an li element as follow:

<ol>
  <li class="parent">
      /** Your HTML **/
  </li>
</ol>

And add the following css to hide the first numbering:

li.parent:before { content: ""; }

Here you can find the demo.