5

Demo: https://jsfiddle.net/jacobgoh101/uqrkaodc/3/

<ol>
  <li>a</li>
</ol>
<ul>
  <li>b</li>
</ul>
<ol>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ol>

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

ol li:before {
  content: counter(list-0, decimal) '. ';
}

current outcome

1 a
• b
1 c
2 d
3 e

Is there a way to achieve this outcome below?

intended outcome

1 a
• b
2 c
3 d
4 e

(Context: Trying to make nested list work with QuillJS. https://github.com/quilljs/quill/issues/979)

UPDATE:

Due to the limitation of the QuillJS library, I am not really able to add start="2" to the ol or change the HTML structure.

I think I need a pure CSS solution, if possible.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Jacob Goh
  • 19,800
  • 5
  • 53
  • 73
  • Does this answer your question? [How can I reset a CSS-counter to the start-attribute of the given list](https://stackoverflow.com/questions/23699128/how-can-i-reset-a-css-counter-to-the-start-attribute-of-the-given-list) – CBroe May 19 '20 at 09:36
  • @CBroe thanks for that. Unfortunately no. Due to the limitation of the QuillJS library, I am unable to add `start="2"` to `ol`. I kinda need a pure CSS solution. – Jacob Goh May 19 '20 at 09:39
  • That is just a WYSIWYG editor library though? So I guess you could just let your own tiny script snippet run over the elements in the DOM, and _set_ the attribute with the appropriate value? – CBroe May 19 '20 at 09:43
  • @CBroe yes.. that will be my last resort. The application I am working on is quite heavy on the client-side. There could be 5 to 10 QuillJS instance actively running, and the content size can be large. Looping over the elements, calculating, adding attribute might be too heavy.. – Jacob Goh May 19 '20 at 09:47
  • Can you wrap these OL/UL into a common parent element at least? Then you could reset the counter on that parent, and increase it only for `ol li` - https://jsfiddle.net/92qsaxtd/ – CBroe May 19 '20 at 09:55
  • 1
    @CBroe hey that works too. Thanks a lot. Do you mind putting it as an answer so that I can give you an upvote? – Jacob Goh May 19 '20 at 09:59

4 Answers4

6

ol {
  list-style-type: none;
  /* Remove default numbering */
}

ol > li:before {
  counter-increment: mycounter;
  content: counter(mycounter) ". ";
}

ol:first-of-type {
  counter-reset: mycounter;
}
<ol>
  <li>a</li>
</ol>
<ul>
  <li>b</li>
</ul>
<ol>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ol>
Vaibhav
  • 1,412
  • 1
  • 10
  • 14
2

If you can wrap those OL/UL into a common parent element, then you can reset the counter on that parent, and increment it for ol li only:

div {
  counter-reset: list-0;
}

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

ol li:before {
  content: counter(list-0, decimal) '. ';
}
<div>
  <ol>
    <li>a</li>
  </ol>
  <ul>
    <li>b</li>
  </ul>
  <ol>
    <li>c</li>
    <li>d</li>
    <li>e</li>
  </ol>
</div>
CBroe
  • 91,630
  • 14
  • 92
  • 150
1

Seems like using <ol start="2'> would work

https://www.w3schools.com/tags/att_ol_start.asp

That said, not sure why you couldn't nest your unordered list inside your original ordered list

<ol>
  <li>a</li>
  <ul>
    <li>b</li>
  </ul>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ol>
Phil Kelly
  • 11
  • 3
  • thanks for that. Unfortunately, due to the limitation of the QuillJS library, I am unable to add `start="2"` to `ol`. I kinda need a pure CSS solution. – Jacob Goh May 19 '20 at 09:41
0

For more new browsers you may set custom begin of counter throw CSS counter-set. This is an example for nested counters with integration of UL lists and with custom beginning of nested lists.

https://jsfiddle.net/atorn/fqb8oz6g/

...
ol {
  counter-reset: l;
  &> li {
    counter-increment: l;
    display: -ms-grid;
    display: flow-root;
    position: relative;
  }
  &>li::before { // counters with numbered lists
    content: counters(l, '.') ')';
    position: absolute;
    z-index: 104;
    top: 0;
    left: -0.625em;
    width: 1.7em;
...
    background-color: #e0e5e6;
  }
  ol >li::before { // more wide field for Level 3 indexes
    z-index: 103;
    width: 2.2em;
    margin-left: -0.7em;
    padding-left: 0.4em;
  }
}
.o0>ol {counter-set: l -1}
.o1>ol {counter-set: l 0}
.o2>ol {counter-set: l 1}
.o3>ol {counter-set: l 2}
.o4>ol {counter-set: l 3}
.o5>ol {counter-set: l 4}
.o6>ol {counter-set: l 5}
...

https://caniuse.com/?search=counter-set - CSS property: counter-set show browser supports (Safari 14.x is not supports custom beginning of counters now).

Screenshot in Chrome Ordered lists with CSS property counter-set

atorn
  • 1
  • 1