CODEWITHSUNDEEP
htmlcsscss-counter
simPod
simPod

Reputation: 13456

CSS list counter increase level

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

  1. 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

Upvotes: 8

Views: 1471

Answers (3)

Danield
Danield

Reputation: 125433

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>

Upvotes: 4

Jon
Jon

Reputation: 1027

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...

Upvotes: 1

jProg2015
jProg2015

Reputation: 1128

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

Upvotes: 1

Related Questions