CODEWITHSUNDEEP
htmlcss
Katalhama
Katalhama

Reputation: 55

Nested ordered lists with different start counter

I use Nested counter to create a html ordered list.

This is my code:

http://jsfiddle.net/Katalhama/YpgfF/

I expect this output

0. zero
  0.1 zero.one
1. one
  1.1. one.one
  1.2. one.two
  1.3. one.three
2. two
  2.1 two.one
  2.2 two.two
    2.2.1 two.two.one
    2.2.2 two.two.two
3. three

But instead I got this:

0. zero
  0.0 zero.one
1. one
  1.0 one.one
  1.1 one.two
  1.2 one.three
2. two
  2.0 two.one
  2.1 two.two
    2.1.0 two.two.one
    2.2.1 two.two.two
3. three

I want to start with a 0 index, but i wanna sublists index start at 1. My only thought is using two counters, but i'm not familiar with advanced CSS yet and i don't know howw to manage them :(

Thanks all!

Upvotes: 0

Views: 829

Answers (4)

Chris
Chris

Reputation: 435

To get the correct numbers for the example on JS Fiddle, change the counter-reset to item 0;

CSS

OL {
    counter-reset: item 0;
    padding-left: 10p;
}

LI { 
    display: block
}

LI:before { 
    content: counters(item, ".") " ";
    counter-increment: item;
}

And your OL's need to be inside your LIs, you can't have an OL inside an OL

HTML:

<body>
    <ol>
        <li>one</li>
        <li>two
            <ol>
                <li>two.one</li>
                <li>two.two</li>
                <li>two.three</li>
            </ol>
        </li>
        <li>three
            <ol>
                <li>three.one</li>
                <li>three.two
                    <ol>
                        <li>three.two.one</li>
                        <li>three.two.two</li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>four</li>
    </ol>
</body>

Upvotes: 1

Gagan Gami
Gagan Gami

Reputation: 10251

By editing Tyblitz HTML structure..which was not showing proper result.

<body>
 <ol>
  <li>zero</li>
  <li>one
      <ol>
       <li>one.one</li>
       <li>one.two</li>
       <li>one.three</li>
      </ol>
  </li>
  <li>two
      <ol>
       <li>two.one</li>
       <li>two.two
            <ol>
             <li>two.two.one</li>
             <li>two.two.two</li>
            </ol>
        </li>
       </ol>
     </li>
  <li>three</li>
  </ol>
 </body>

CSS

OL { counter-reset: item -1; padding-left: 10px;  }
ol li ol { counter-reset: item 0; }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

JSFiddel

Upvotes: 0

King King
King King

Reputation: 63317

There are 2 problems in your code. The first is very serious. The HTML code is in fact invalid. The ol can only contains li elements as direct children. But you added ol elements as direct children of ol. You have to wrap the ol elements inside the li elements. The second problem is the problem you asked for. To achieve what you want, we can set the counter-reset differently for the outermost ol and others ol:

HTML:

 <ol id='list'>
  <li>one</li>
  <li>two  
   <ol>
    <li>two.one</li>
    <li>two.two</li>
    <li>two.three</li>
   </ol>
  </li>
  <li>three</li>  
  <li>four 
   <ol>
    <li>four.one</li>
    <li>four.two
        <ol>
          <li>four.two.one</li>
          <li>four.two.two</li>
        </ol>
    </li>          
   </ol>
  </li>
  <li>five</li>
</ol>

CSS:

#list { 
  counter-reset: item -1;
}
ol {
  counter-reset: item; 
  padding-left: 10px;  
}
LI { display: block }
LI:before { 
  content: counters(item, ".") " "; 
  counter-increment: item;
}

Demo 1

Without using an id for the outermost ol, you can do something like this:

ol { 
  counter-reset: item -1;
}
ol ol {
  counter-reset: item; 
  padding-left: 10px;  
}
LI { display: block }
LI:before { 
  content: counters(item, ".") " "; 
  counter-increment: item;
}

Demo 2

Here is another approach:

ol { 
  counter-reset: item -1;
}
LI { display: block }
LI:before { 
  content: counters(item, ".") " "; 
  counter-increment: item;
}
ol ol li:first-child:before {
  counter-increment: item 2;
}

Demo 3

Upvotes: 1

webketje
webketje

Reputation: 10966

No no your HTML (in the fiddle) is broken. As you mentioned in the title your <ol>'s should be nested, so that means inside other li's, like this 

<ol>
  <li>Two
    <ol>
      <li>Two.one</li>
    </ol>
  </li>
</ol>

At the moment your ol's are direct children of your other ol's. Ol's may only have li's as children (or script tags). So at the moment you have this.

<ol>
   <li>Two</li>
   <ol>
      <li>Two.one</li>
   </ol>
</ol>

When you've changed it to the first codeblock in this answer, you can apply different CSS for nested li's, like this:

ol { counter-reset: item -1 }
ol li ol  { counter-reset: item 0 }

Demo here: http://jsfiddle.net/kevinvanlierde/YpgfF/1/

Upvotes: 0

Related Questions