CODEWITHSUNDEEP
htmlcss
rinold simon
rinold simon

Reputation: 3052

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

Upvotes: 5

Views: 1612

Answers (4)

Dani Corretja
Dani Corretja

Reputation: 311

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.

Upvotes: 8

David Landup
David Landup

Reputation: 168

You can use counters to do so! Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css? Here's another question on the same topic answered :D

Upvotes: 0

Govind jha
Govind jha

Reputation: 400

Please Use this 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, ".") "." counters(item, ".");
    display: table-cell;
    padding-right: 0.6em;    
}

li li {
    margin: 0;
}

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


    <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>
    </ol>

Upvotes: 1

Senjuti Mahapatra
Senjuti Mahapatra

Reputation: 2590

Just take out the extra dot (". ") from li:before in your CSS:

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

Here is the Demo

Upvotes: 3

Related Questions