Trailing zeros in content: counters function of CSS

Question

I've used the content CSS value with the counters function to create ordered lists that have nested numbering. My html is created using the DITA open toolkit, so there are auto-generated and elements that cannot be avoided. Most of the time it is working, including with mixed ol and ul lists and steps with choices.

However, when I use the Dita format of step > info > ul > li > ol > li, I recive an unexpected ".0" added to the numbering of the step level.

For example, this DITA input:

<step>
    <cmd>Step with unordered list then an ordered list:</cmd>
    <info>
    <ul>
        <li>Nested UL li 1
        <ol>
            <li>Nested OL li 1</li>
            <li>Nested OL li 2</li>
            <li>Nested OL li 3</li>
        </ol>
        </li>
        <li>Nested UL li 2</li>
        <li>Nested UL li 3
        <ol>
            <li>Nested OL li 1</li>
            <li>Nested OL li 2</li>
            <li>Nested OL li 3</li>
        </ol>
        </li>
        <li>Nested UL li 4</li>
    </ul>
    </info>
</step>

Creates this HTML COde:

<li class="- topic/li task/step li step stepexpand">
   <span class="- topic/ph task/cmd ph cmd">Step with unordered list then an ordered list:</span>
   <div class="- topic/itemgroup task/info itemgroup info">
     <ul class="- topic/ul ul">
    <li class="- topic/li li">Nested UL li 1>
          <ol class="- topic/ol ol" type="a">
          <li class="- topic/li li">Nested OL li 1</li>
          <li class="- topic/li li">Nested OL li 2</li>
          <li class="- topic/li li">Nested OL li 3</li>
          </ol>
    </li>
    <li class="- topic/li li">Nested UL li 2</li>
    <li class="- topic/li li">Nested UL li 3
          <ol class="- topic/ol ol" type="a">
          <li class="- topic/li li">Nested OL li 1</li>
          <li class="- topic/li li">Nested OL li 2</li>
          <li class="- topic/li li">Nested OL li 3</li>
          </ol>
    </li>
    <li class="- topic/li li">Nested UL li 4</li>
     </ul>
   </div>
</li>

Which looks like this:

2. Step with unordered list then an ordered list:

   • Nested UL li 1

     2.0.1. Nested OL li 1

     2.0.2. Nested OL li 2

     2.0.3. Nested OL li 3

   • Nested UL li 2

   • Nested UL li 3

     2.0.1. Nested OL li 1

     2.0.2. Nested OL li 2

     2.0.3. Nested OL li 3

   • Nested UL li 4

Here is my CSS:

li{
      margin: 0;
      margin-bottom: 0.6em;
}
ul{
  margin: 0;
  padding-left: 10pt; 
}

ol{
  counter-reset: item;
  margin: 0;
  padding: 0;
  list-style-type: decimal;
}

ol > li{
  display: table;
  counter-increment: item;
}

div > ul > li > ol > li,
section > ul > li > ol > li{
  display: table;
  counter-increment: nested;
}

.Num ol > li:before{
  content: counters(item, ".") ".";
  display: table-cell;
  padding-right: 0.6em;    
}

div > ul > li > ol > li:before,
section > ul > li > ol > li:before{
  content: counters(nested, ".") ".";
  display: table-cell;
  padding-right: 0.6em;    
}

.info ul > li ol > li{
  counter-increment: sublist;
}

.info ul > li > ol > li:before{
  content: counters(item, ".")"." counters(sublist, ".")".";
  display: table-cell;
  padding-right: 0.6em;    
}

Does anyone have any idea where that decemil and second-leve zero coming from? It does not appeare when the top leve is a regular li not a step.

Thank you

Answer 1

You should rather create a single counter if you are using CSS counters() function. In this case, each time you reset the counter, it will create a new level for the counters(). See Automatic Numbering With Counters for more details.

Here is the result with the modified CSS:

li {
  margin: 0;
  margin-bottom: 0.6em;
}
ul {
  margin: 0;
  padding-left: 10pt;
  counter-reset: item;
}

ol {
  counter-reset: item;
  margin: 0;
  padding: 0;
  list-style-type: decimal;
}

ol > li {
  display: table;
  counter-increment: item;
}
ul > li {
  counter-increment: item;
}

div > ul > li > ol,
section > ul > li > ol {
  display: table;
  counter-reset: item;
}
div > ul > li > ol > li,
section > ul > li > ol > li {
  display: table;
  counter-increment: item;
}

.Num ol > li:before {
  content: counters(item, ".") ".";
  display: table-cell;
  padding-right: 0.6em;
}

div > ul > li > ol > li:before,
section > ul > li > ol > li:before {
  content: counters(item, ".") ".";
  display: table-cell;
  padding-right: 0.6em;
}

.info ul > li ol {
  counter-reset: item;
}
.info ul > li ol > li {
  counter-increment: item;
}

.info ul > li > ol > li:before {
  content: counters(item, ".") ".";
  display: table-cell;
  padding-right: 0.6em;
}

<div class="li step p">
    <span class="ph cmd">Step with unordered list then an ordered list:</span>
    <div class="itemgroup info">
        <ul class="ul">
            <li class="li">Nested UL li 1
                <ol class="ol" type="a">
                    <li class="li">Nested OL li 1</li>
                    <li class="li">Nested OL li 2</li>
                    <li class="li">Nested OL li 3</li>
                </ol>
            </li>
            <li class="li">Nested UL li 2</li>
            <li class="li">Nested UL li 3
                <ol class="ol" type="a">
                    <li class="li">Nested OL li 1</li>
                    <li class="li">Nested OL li 2</li>
                    <li class="li">Nested OL li 3</li>
                </ol>
            </li>
            <li class="li">Nested UL li 4</li>
        </ul>
    </div>
</div>