Html ordered list 1 1 1 2 Nested counters and scope not working

Question

I use nested counters and scope to create an ordered list    x000D   x000D  ol   x000D      counter-reset  item  x000D      padding-left  10px  x000D    x000D  li   x000D      display  block x000D    x000D  li before   x000D      content  counters item            x000D      counter-increment  item x000D    x000D   lt ol gt  x000D       lt li gt one lt  li gt  x000D       lt li gt two lt  li gt  x000D       lt ol gt  x000D           lt li gt two one lt  li gt  x000D           lt li gt two two lt  li gt  x000D           lt li gt two three lt  li gt  x000D       lt  ol gt  x000D       lt li gt three lt  li gt  x000D       lt ol gt  x000D           lt li gt three one lt  li gt  x000D           lt li gt three two lt  li gt  x000D           lt ol gt  x000D               lt li gt three two one lt  li gt  x000D               lt li gt three two two lt  li gt  x000D           lt  ol gt  x000D       lt  ol gt  x000D       lt li gt four lt  li gt  x000D   lt  ol gt  x000D   x000D   x000D    I expect the following outcome   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     3 2 1 three two one     3 2 2 three two two 4  four   Instead  this is what I see  wrong numbering    1  one 2  two   2 1  two one   2 2  two two   2 3  two three 2 4 three  lt  -- this is where it goes wrong  when going back to the parent -- gt    2 1 three one   2 2 three two     2 2 1 three two one     2 2 2 three two two 2 3 four   I have no clue  does anyone see where it goes wrong   Here is a JSFiddle  http   jsfiddle net qGCUk 2

User · Answer

After going through other answers I came up with this, just apply class nested-counter-list to root ol tag:

sass code:

ol.nested-counter-list {
  counter-reset: item;

  li {
    display: block;

    &::before {
      content: counters(item, ".") ". ";
      counter-increment: item;
      font-weight: bold;
    }
  }

  ol {
    counter-reset: item;

    & > li {
      display: block;

      &::before {
        content: counters(item, ".") " ";
        counter-increment: item;
        font-weight: bold;
      }
    }
  }
}

css code:

ol.nested-counter-list {
  counter-reset: item;
}
ol.nested-counter-list li {
  display: block;
}
ol.nested-counter-list li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: bold;
}
ol.nested-counter-list ol {
  counter-reset: item;
}
ol.nested-counter-list ol > li {
  display: block;
}
ol.nested-counter-list ol > li::before {
  content: counters(item, ".") " ";
  counter-increment: item;
  font-weight: bold;
}

_x000D_

ol.nested-counter-list {
  counter-reset: item;
}

ol.nested-counter-list li {
  display: block;
}

ol.nested-counter-list li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: bold;
}

ol.nested-counter-list ol {
  counter-reset: item;
}

ol.nested-counter-list ol>li {
  display: block;
}

ol.nested-counter-list ol>li::before {
  content: counters(item, ".") " ";
  counter-increment: item;
  font-weight: bold;
}

_x000D_

<ol class="nested-counter-list">
  <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>

_x000D_

And if you need trailing . at the end of the nested list's counters use this:

_x000D_

ol.nested-counter-list {
  counter-reset: item;
}

ol.nested-counter-list li {
  display: block;
}

ol.nested-counter-list li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: bold;
}

ol.nested-counter-list ol {
  counter-reset: item;
}

_x000D_

<ol class="nested-counter-list">
  <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>

_x000D_

User · Answer

Keep it Simple  Simpler and a Standard solution to increment the number and to retain the dot at the end  Even if you get the css right  it will not work if your HTML is not correct  see below  CSS ol     counter-reset  item    ol li     display  block    ol li before     content  counters item   quot    quot    quot    quot     counter-increment  item     SASS ol       counter-reset  item      li           display  block           amp  before               content  counters item   quot    quot    quot    quot               counter-increment  item                    HTML Parent Child If you add the child make sure the it is under the parent li   lt  -- WRONG -- gt   lt ol gt       lt li gt Parent 1 lt  li gt   lt  -- Parent is Individual  Not hugging -- gt           lt ol gt                lt li gt Child lt  li gt           lt  ol gt       lt li gt Parent 2 lt  li gt   lt  ol gt    lt  -- RIGHT -- gt   lt ol gt       lt li gt Parent 1           lt ol gt                lt li gt Child lt  li gt           lt  ol gt       lt  li gt   lt  -- Parent is Hugging the child -- gt       lt li gt Parent 2 lt  li gt   lt  ol gt

User · Answer

This is a great solution  With a few additional CSS rules you can format it just like an MS Word outline list with a hanging first line indent   OL      counter-reset  item     LI      display  block     LI before      content  counters item               counter-increment  item     padding-right 10px     margin-left -20px

User · Answer

Moshe s solution is great but the problem may still exist if you need to put the list inside a div   read  CSS counter-reset on nested list   This style could prevent that issue    x000D   x000D  ol  gt  li   x000D      counter-increment  item  x000D    x000D   x000D  ol  gt  li first-child   x000D    counter-reset  item  x000D    x000D   x000D  ol ol  gt  li   x000D      display  block  x000D    x000D   x000D  ol ol  gt  li before   x000D      content  counters item             x000D      margin-left  -20px  x000D    x000D   lt ol gt  x000D     lt li gt list not nested in div lt  li gt  x000D   lt  ol gt  x000D   x000D   lt hr gt  x000D   x000D   lt div gt  x000D     lt ol gt  x000D     lt li gt nested in div lt  li gt  x000D     lt li gt two x000D       lt ol gt  x000D         lt li gt two one lt  li gt  x000D         lt li gt two two lt  li gt  x000D         lt li gt two three lt  li gt  x000D       lt  ol gt  x000D     lt  li gt  x000D     lt li gt three x000D       lt ol gt  x000D         lt li gt three one lt  li gt  x000D         lt li gt three two x000D           lt ol gt  x000D             lt li gt three two one lt  li gt  x000D             lt li gt three two two lt  li gt  x000D           lt  ol gt  x000D         lt  li gt  x000D       lt  ol gt  x000D     lt  li gt  x000D     lt li gt four lt  li gt  x000D     lt  ol gt  x000D   lt  div gt  x000D   x000D   x000D    You can also set the counter-reset on li before

User · Answer

Use this style to change only the nested lists   ol       counter-reset  item     ol  gt  li       counter-increment  item     ol ol  gt  li       display  block     ol ol  gt  li before       content  counters item                 margin-left  -20px

User · Answer

Uncheck  normalize CSS   - http   jsfiddle net qGCUk 3  The CSS reset used in that defaults all list margins and paddings to 0  UPDATE http   jsfiddle net qGCUk 4   - you have to include your sub-lists in your main  lt li gt    x000D   x000D  ol   x000D    counter-reset  item x000D    x000D  li   x000D    display  block x000D    x000D  li before   x000D    content  counters item            x000D    counter-increment  item x000D    x000D   lt ol gt  x000D     lt li gt one lt  li gt  x000D     lt li gt two x000D       lt ol gt  x000D         lt li gt two one lt  li gt  x000D         lt li gt two two lt  li gt  x000D         lt li gt two three lt  li gt  x000D       lt  ol gt  x000D     lt  li gt  x000D     lt li gt three x000D       lt ol gt  x000D         lt li gt three one lt  li gt  x000D         lt li gt three two x000D           lt ol gt  x000D             lt li gt three two one lt  li gt  x000D             lt li gt three two two lt  li gt  x000D           lt  ol gt  x000D         lt  li gt  x000D       lt  ol gt  x000D     lt  li gt  x000D     lt li gt four lt  li gt  x000D   lt  ol gt  x000D   x000D   x000D

User · Answer

Check this out    http   jsfiddle net PTbGc   Your issue seems to have been fixed     What shows up for me  under Chrome and Mac OS X   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     3 2 1 three two one     3 2 2 three two two 4  four     How I did it    Instead of     lt li gt Item 1 lt  li gt   lt li gt Item 2 lt  li gt      lt ol gt           lt li gt Subitem 1 lt  li gt           lt li gt Subitem 2 lt  li gt      lt  ol gt    Do     lt li gt Item 1 lt  li gt   lt li gt Item 2     lt ol gt           lt li gt Subitem 1 lt  li gt           lt li gt Subitem 2 lt  li gt      lt  ol gt   lt  li gt

User · Answer

I encountered similar problem recently  The fix is to set the display property of the li items in the ordered list to list-item  and not display block  and ensure that the display property of ol is not list-item  i e  li   display  list-item     With this  the html parser sees all li as the list item and assign the appropriate value to it  and sees the ol  as an inline-block or block element based on your settings  and doesn t try to assign any count value to it

[html] Html ordered list 1.1, 1.2 (Nested counters and scope) not working

Examples related to html

Examples related to css

Examples related to html-lists