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 to add Get in Touch page in webpage? [closed]

    Newbie CSS/HTML: How to add ad in a div container to the side of the page?

    How to get 60 fps in css element width animation?

    How to change css display none or block with button click

    HTML CSS How to swap css attributes

    How to make two lines text inside list-item element of bootstrap? [closed]

    How to center multiple divs inside a container in CSS

    How to add custom fonts [duplicate]

    How can I Highlight links only in Blog Posts with Mouseover?

    How to organise my web content?

    CSS 'schema' how-to

    How to create an image tag cloud

    How do I specify XPATH or CSS in Nokogiri to scrape a page's table data?

    How to write a more specific css

    How to resize an image in pure HTML/CSS while keeping its proportions?

    How do i shrink my link menu

    How do I centralize an ordered list?

    Div Title on div border how to [closed]

    How to hide an input-box with CSS

    How to stop DIVS from colliding when page resized (footer)?

    How to identify unused css definitions [closed]

    PrimeFaces 3.0 - How do I override the default opacity of a dialog overlay?

    advice about how to vertically center content in fluid element

    How can I apply styles to a label whose checkbox is checked using only CSS?

    How to make background image with aspect ratio in html and css [closed]

    How to get right sidebar up on main content on resize of flexible with page?

    Selected text showing oversized selection area

    Parsing erb within erb in a view. How to add CSS class?

    how to reference elements in CSS or JS files for fastest parsing?

    how to change the color of disabled controls