1

Looking for the following ordered

1a.milk
1b.bread
1c.butter
1d.coffee beans

The following syntax did not satisfy my requirement.

<ol>
    <li>milk
        <ol type="a">
            <li>bread</li>
            <li>butter</li>
            <li>coffee beans</li>
        </ol>
    </li>   
</ol>

Above syntax show bellow output

1.milk
  a.bread
  b.butter
  c.coffee beans
shamim
  • 6,640
  • 20
  • 85
  • 151

1 Answers1

2

You can use CSS counters and have 1a-1d for each of the lis (the 1 is from the ol counter and the a-d is from the li counter. CSS counters can be configured to show a number of different styles and types.

EDIT - as @Tomalak indicates in the comments - I have amended this to reset the li-index in the ol styles - and added a second list to demonstrate the result. The first list is showing 1a - 1d and the second list is showing 2a - 2d.

I also changed it to an ol structure to closer match the OP's request, but the concept works for any type of list (and any type of repeating element).

.list-wrapper {
    counter-reset: ol-index;
    counter-reset: li-index;
}

ol {
    list-style: none;
    counter-increment: ol-index;
    counter-reset: li-index;
}

ol li {
    counter-increment: li-index;
}

ol li::before {
  content: counter(ol-index) counter(li-index, lower-alpha) ". ";
}
<div class="list-wrapper">
  <ol>
      <li>milk</li>
      <li>bread</li>
      <li>butter</li>
      <li>coffee beans</li>
  </ol>
  <ol>
      <li>paper</li>
      <li>flour</li>
      <li>jam</li>
      <li>biscuits</li>
  </ol>
</div>
gavgrif
  • 15,194
  • 2
  • 25
  • 27
  • This misses `counter-reset: li-index;` in the `ul` rule - otherwise it would start the second `
      ` at `2e` instead of `2a`.
     – Tomalak Dec 16 '18 at 08:11
  • Thanks @Tomalak - excellent point - I have amended my answer and put a second list in to demonstrate your suggestion. I also changed it to an ol structure since the OP asked about that- thanks. Gav – gavgrif Dec 16 '18 at 08:49