CSS list counter increase level

Question

HTML

<ol>
  <li>item1
    <ol>
      <li>item2</li>
    </ol>
  </li>
  <li>item1
    <ol>
      <li>item2</li>
      <li>item3</li>
    </ol>
  </li>
</ol>

SCSS

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

Now the list is ordered like this:

1. item1

1.1. item2

2. item1

2.1. item2

2.2. item3

Is there any way how I can increment ordering by one level at the beggining of the list? Second <ol> would start with 2: 2.1. item1

1.1. item1

1.1.1. item2

1.2. item1

1.2.1. item2

1.2.2. item3

-------second ol in the same parent---------

2.1. item1

2.1.1. item2

2.2. item1

2.2.1. item2

2.2.2. item3

Pen is here: http://codepen.io/simPod/pen/wawOLd

Slumberous

Does this work content: "1." counters(item, ".") ". ";? – Liba

But wouldn't the second then be 1.2. li 2 and 1.2.1 li 2 test... – Adviser

well it probably would but I also need to support multiple levels which I forgot to mention :) Like 2.2. etc. I'll update the post – Slumberous

What about this one? codepen.io/anon/pen/OVXLgy – Arid

Thank you. That works fine, however for my case the correct behavior is as is in accepted answer (it slightly differs), – Slumberous

Answer 1

You could set up an additional counter and only update it on the outer lists (which can be selected via body > ol)

Updated Codepen

body {
  counter-reset: outer;
}
body > ol {
  counter-increment: outer;
}
ol {
  counter-reset: item;
}
ol li {
  display: block;
}
ol > li:before {
  content: counter(outer)"." counters(item, ".")". ";
  counter-increment: item;
}

<ol>
  <li>item1
    <ol>
      <li>item2</li>
    </ol>
  </li>
  <li>item1
    <ol>
      <li>item2</li>
      <li>item3</li>
    </ol>
  </li>
</ol>
<ol>
  <li>item1
    <ol>
      <li>item2</li>
    </ol>
  </li>
  <li>item1
    <ol>
      <li>item2</li>
      <li>item3</li>
    </ol>
  </li>
</ol>

Retardant

Answer 2

Not sure if this is useful but; just achieved this via CSS. Have to specify the start value in the CSS so it might not work for you.

And the CSS:

       body ol { 
            list-style-type: none;
            counter-reset: level1 50;
        }
        ol li:before {
            content: counter(level1) ". ";
            counter-increment: level1;
        }
        ol li ol {
            list-style-type: none;
            counter-reset: level2;
        }
        ol li ol li:before {
            content: counter(level1) "." counter(level2) " ";
            counter-increment: level2;
        }

In this circumstance you would get:

50 Item

50.1 Sub-Item

Incarnadine

thanks, I'd prefer something more "automatic" though – Slumberous

Answer 3

you could try the counter-reset property (http://www.w3schools.com/cssref/pr_gen_counter-reset.asp)

you would declare: counter-reset: section; on the enclosing element and then:

ol li { counter-reset: subsection; }
ol li:before {
    counter-increment: section;
    content: counter(section) ".";
}
ol li ol li { counter-reset: subsection; }
ol li ol li:before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) ".";
}
etc...

Cleanlimbed

Thank you. It's the same solution as proposed by @Retardant I suppose – Slumberous