Ordered list not applying nested number correctly to second item

Question

Hi I'm trying to sort out an ordered list for a terms and conditions page, unfortunatly when I use the below code it nests the list as

1.item
     1.item
        a.item
        b.item 
        c.item
          i. item

Which is not what I want, I would like it to read as

1.item
     1.1 item
        a.item
        b.item 
        c.item
          i. item

The markup is

<ol id="mainOL">
    <li>item
        <ol>
            <li>item
                <ol type="a">
                    <li>item</li>
                    <li>item</li>
                    <li>item
                        <ol type="i">
                            <li>item</li>
                            <li>item</li>
                            <li>item/li>
                                </ol>
                            </li>
                    </li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

ol#mainOL {
    counter-reset: mainOL;
    margin-left: 0px;
}
ol#mainOL > li:before{
    counter-increment: mainOL;
   /* content: counters(mainOL,".")" ";*/
}

possible duplicate of [Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css?](http://stackoverflow.com/questions/4098195/can-ordered-list-produce-result-that-looks-like-1-1-1-2-1-3-instead-of-just-1) — Nico O, Sep 01 '15 at 10:27
Pretty my solution matches up with the most accepted answer in that thread and it's still displaying wrong. Not sure if duplicate. — Alex, Sep 01 '15 at 10:29
I did not check the output to be honest. This looks promising: http://stackoverflow.com/a/31540262/3244925 — Nico O, Sep 01 '15 at 10:30
it does but unfortunatly that breaks the ordered list types of a and i reverting it to a numbered list, very confusing! — Alex, Sep 01 '15 at 10:37

score 3 · Accepted Answer · answered Sep 01 '15 at 10:37

Basicly, you want to change the first and second level of the list.

With counters you can. (like Nico O also pointed out)

#mainOL,
#mainOL>li>ol {
  list-style: none;
}
/* first level*/

#mainOL {
  counter-reset: outer;
}
#mainOL>li:before {
  counter-increment: outer;
  content: counter(outer, decimal)'.';
}
/* second level*/

#mainOL>li>ol {
  counter-reset: inner;
}
#mainOL>li>ol>li:before {
  counter-increment: inner;
  content: counter(outer, decimal)"."counters(inner, '.');
}

<ol id="mainOL">
  <li>item
    <ol>
      <li>item
        <ol type="a">
          <li>item</li>
          <li>item</li>
          <li>item
            <ol type="i">
              <li>item</li>
              <li>item</li>
              <li>item</li>
            </ol>
          </li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

That works great, cheers. I attempted to use counters but they were removing the a and i types from the new
, do you know why this was? — Alex, Sep 01 '15 at 10:38
If you apply it on `ol li` or `#mainOL li` it will affect **all** the list-items that are children of the list. Using the direct descendant selector `>` will only affect the list items that are a direct child of the list (`#mainOL>li`) — GreyRoofPigeon, Sep 01 '15 at 10:41

Ordered list not applying nested number correctly to second item

1 Answers1