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


Tags: html,css

Problem :

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

got the answer, refer JSfiddle



Solution :

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.


    CSS Howto..

    How do I change the css so lowering one class does not lower the other?

    How am I supposed to change the Bootstrap CSS properties in a new Yeoman project?

    How to align multiple images horizontally (in a row)?

    How to automatically validate after typing the input without using any frameworks, just simple code for my registration form?

    How do prevent a div from resizing? [closed]

    How to add space between border line and menu item

    How to make a hidden border side inherit border properties in CSS

    How to link a main.css to all Django templates? [closed]

    How to hide the div on click through animation css

    How to view browser's calculated CSS specificity?

    CSS: How to float 3 divs side by side for width:100% without messing up?

    The input fields do not have the same width. How to resolve this CSS challenge?

    How do I center (vertically and horizontally) buttons in a div tag?

    How to overlap other elements using resizable element?

    how to add active css class to a link in Wordpress

    How to make form line up?

    How to determine if width has px or %

    How do I use CSS to reposition this image?

    How to use CSS to ensure items remain offscreen even if window is resized?

    How to center li tags list

    How to disable flow around elements in table (CSS)

    How to position div at the bottom of a page

    How to set readonly property of textbox from css

    How to disable CSS in Browser for testing purposes

    Problems with properly simulate a border to a “ribbon” with css. How do I correct it?

    Does anyone know how to store a css change made by javascript function locally?

    How to gain hanging indent list with CSS Counters?

    How to change the css class name dynamically in angular 2

    Selenium how to access two controls of same css class

    How to create a natural-looking line using css and maybe javascript? [closed]