How to Specify a Starting Number for an Ordered List

Is it possible to specify a starting number for an ordered list?

If you need the functionality to start an ordered list (OL) at a specific point, you'll have to specify your doctype as HTML 5; which is:

<!doctype html>

With that doctype, it is valid to set a start attribute on an ordered list. Such as:

<ol start="6">  <li>Lorem</li>  <li>Ipsum</li>  <li>Dolor</li></ol>

Change start number of an ordered list (ol)

You have list-style-type set to none on your ol.

.number-circles {
   margin: 40px 0 0 0;
   padding: 0;
   list-style-type: none;
}

The start attribute won't make a difference, because the value will be hidden.

list-style-type

The list-style-type property specifies the appearance of a list item
element.

none

No item marker is shown.

_{source: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type}

Can I style numbering an ordered list that has a start attribute value?

You can simulate this using CSS variable that you set instead of start and use it to reset the counter. For semantic purpose you can also keep start attribute.

.custom {  margin: 0;  padding: 0;  list-style-type: none;  counter-reset: step-counter calc(var(--start) - 1);}
.custom li {  counter-increment: step-counter;  margin-bottom: 10px;}
.custom li::before {  content: counter(step-counter);  margin-right: 5px;  font-size: 80%;  background-color: rgb(0, 200, 200);  color: white;  font-weight: bold;  padding: 3px 8px;  border-radius: 3px;}

<ol style="--start:6" start="6" class="custom">  <li>This is the sixth item</li>  <li>This is the seventh item</li>  <li>This is the eighth item</li>  <li>This is the ninth item</li>  <li>This is the tenth item</li></ol>

Halt ordered list numbering

If I understood you correctly, then perhaps these examples below can help you somehow. You can combine both solutions completely for your needs.

Example #1.
By default, lists have display: list-item; To simply disable the intermediate element, it is enough to assign it display: block; (or any other), as can be seen in the example:

h3 + ol > li:only-child,
.no-style {
  display: block;
}

<h3>Some title</h3>
<ol>
  <li>One item</li>
  <li class="no-style">Second item that shouldn't get ordered and shouldn't increment the next item either</li>
  <li>Third item, ordered with number 2</li>
</ol>
<h3>Some other title</h3>
<ol>
  <li>Another list's first item</li>
  <li>Another list's second item</li>
  <li>Another list's third item</li>
</ol>
<h3>And yet another title</h3>
<ol>
  <li>A single item here that shouldn't get ordered</li>
</ol>

How to change the start attribute in ordered lists in tinyMCE?

The lists plugin has the ability to add an option to the context menu to access a list properties dialog (called lists) where you can select the starting number for the list. For example:

contextmenu: "link image imagetools lists table"

Here is a working example in TinyMCE Fiddle:

https://fiddle.tiny.cloud/hlhaab

Sample Image

Numbering a nested list in a single ol list

If you can't change your HTML markup, you can simulate nested numbering on a single list with CSS counters.

You need to remove the default list-style-type and add the counter with pseudo elements.

.sub-item elements can have their own counter (sub-counter in the following example) that doesn't affect the one set on all the <li> elements (main-counter in the following example) :

ol {
  counter-reset: main-counter, sub-counter;
  list-style-type:none;
  padding:0;
}
li {
  counter-increment: main-counter;
  counter-reset: sub-counter;
}
li::before {
  content: counter(main-counter) ". ";
}
li.sub-item {
  counter-increment: sub-counter;
  padding-left:1em;
  counter-reset: none;
}
li.sub-item::before {
  content: counter(sub-counter, lower-alpha) ". ";
}

<ol>
  <li>One</li>
  <li>Two</li>
  <li>THree</li>
  <li class="sub-item">Sub three 1</li>
  <li class="sub-item">Sub three 2</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li class="sub-item">Sub three 1</li>
  <li class="sub-item">Sub three 2</li>
  <li>Eight</li>
</ol>

Can you style ordered list numbers in javascript?

You can add a class to list items you want to highlight.

document.querySelector('ol').children[1].classList.add('highlight');

li.highlight::marker {
  color: red;
}

<ol>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>