Nested counters HTML list 1 1.1 a i - is this possible

Question

I have a convoluted nested ordered list that I need to implement which looks like this:

1. one
2. two
    2.1 two.one
    2.2 two.two
    2.3 two.three
3. three
    3.1 three.one
    3.2 three.two
        a. lower-alpha-a
        b. lower-alpha-b
            i. lower-numeral-i
            ii. lower-numberal-ii
4. four

I have tried this with css counters but I cant get the increment to stop after the first level, it goes all the way through to the last level.

CSS

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

HTML

<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</li>
      <ol type="a">
        <li>three.two.one</li>
        <li>three.two.two
          <ol type="i">
            <li>three.two.one</li>
            <li>three.two.two</li>
          </ol>
        </li>
      </ol>
    </ol>
  </li>
  <li>four</li>
</ol>

jsfiddle link: http://jsfiddle.net/902fLnt7/2/ Any help would be appreciated

possible duplicate of http://stackoverflow.com/questions/10405945/html-ordered-list-1-1-1-2-nested-counters-and-scope-not-working — Sai, Oct 24 '14 at 03:57
sorry don't think its a duplicate. I am looking for a solution for a different list-style on the nested lists , so that makes it different from the link. ta — tech_hoodwink, Oct 24 '14 at 04:36
@tech_hoodwink show us your html code. it is hard to give answer without it. — Mr_Green, Oct 24 '14 at 04:49

blurfus · Answer 1 · 2014-10-24T05:43:57.213

Adding a new counter for each level seemed to do the trick

See Demo

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

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

<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 class="a">
          <li>three.two.one</li>
          <li>three.two.two
            <ol class="i">
              <li>three.two.one</li>
              <li>three.two.two</li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
</ol>

misterManSam · Accepted Answer · 2014-10-24T05:40:12.050

It is slightly different to the linked answer.

Firstly, there is a wrongly nested ordered list in your questions HTML. The closing tag of <li>three.two</li> should wrap <ol type="a">

We need to remove the content for lower levels with:

ol li li li:before {
  display: none;
}

Change the counter slightly for the second level:

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

and give our lower levels their styles (the list style should be consistent, so no need for classes):

ol li li li {
  list-style: lower-alpha;
}
/* Every step down from here will take this property */
ol li li li li {
  list-style: lower-roman;
}

Of course, we can override with classes, for one level, if really needed:

ol.alpha li {
  list-style: lower-alpha;
}

Complete Example

ol {
  counter-reset: item;
}
ol li {
  list-style: none;
}
ol li:before {
  content: counters(item, ".")". ";
  counter-increment: item;
}
ol li li:before {
  content: counters(item, ".")" ";
  counter-increment: item;
}
ol li li li:before {
  display: none;
}
ol li li li {
  list-style: lower-alpha;
}
/* Every step down from here will take this property */

ol li li li li {
  list-style: lower-roman;
}
/* Override with classes */

ol.alpha li {
  list-style: lower-alpha;
}

<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
            <ol>
              <li>three.two.one</li>
              <li>three.two.two

                <ol>
                  <li>three.two.one</li>
                  <li>three.two.two
                    <ol>
                      <li>three.two.one</li>
                      <li>three.two.two
                        <ol class="alpha">
                          <li>three.two.one</li>
                          <li>three.two.two</li>
                        </ol>
                      </li>
                    </ol>
                  </li>
                </ol>
              </li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
</ol>

Seems to work but I wonder about how easily it can get out of hand if you have many levels nested (and maybe some are to be one style while others at the same nested level not) — blurfus, Oct 24 '14 at 05:24
I've added a ridiculous amount of nested items to my answer. They will take the style from the most li's (in this case `ol li li li li`, so we have roman numerals) **You can always override with a class if you really want to :)** — misterManSam, Oct 24 '14 at 05:27
thanks a lot @misterManSam this is great and makes perfect sense. — tech_hoodwink, Oct 24 '14 at 09:10

Nested counters HTML list 1 1.1 a i - is this possible

CSS

HTML

2 Answers2

Complete Example