How to Reset a CSS-Counter to the Start-Attribute of the Given List

CSS counter-reset on nested list

Your issue isn't with the counter-reset property, it is with the content property and the counters() function. This function atomaticaly adds a new instance for each nested element. This is great for the nested ol elements but it also adds a counter instance when the first level ol is nested in any other element.

So you should use the counter() function on the first level ol elements and keep the counters() (notice the "s") function on the second level one :

More info on MDN about nesting counters

ol {    counter-reset: item;    list-style: none;}li:before {    counter-increment: item;    content: counter(item)". ";}ol ol li:before{  content: counters(item,".") " ";}

<ol>    <li>BBD</li>    <li>BBD        <ol>            <li>BBD</li>            <li>BBD</li>            <li>BBD</li>        </ol>    </li>    <li>BBD</li></ol>
<ol>    <li>BBD</li>    <li>BBD</li>    <li>BBD</li></ol>
<div>    <ol style="color:red;">        <li>BBD</li>        <li>BBD</li>        <li>BBD</li>    </ol></div>

CSS counter-increment - start counter at 100

You can specify what the counter should be increased with by adding a number after the counter name, like this:

counter-increment: counter-name 100;

You can do the same thing with counter-reset, but since you want the first incrementation to be 100 you should start at 0

More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/counter-increment

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>

CSS counter with specific count at the start

You can try the below solution

More help on CSS Counters HERE

body {  font: 13px Verdana;}
ol {  list-style: none;}
.main {  counter-reset: section 1;}
.submain {  counter-reset: subsection 2;}
.submain1 {  counter-reset: subsection 3;}
ol.main>li {  counter-reset: subsection;}
ol li:before {  color: red;  counter-increment: section;  content: counter(section) ". ";}
ol li li:before {  color: red;  counter-increment: subsection;  content: counter(section) "." counter(subsection) ". ";}

<ol class="main">  <li>Item 2    <ol class="submain">      <li>Item 2.3 </li>      <li>Item 2.4</li>      <li>Item 2.5</li>      <li>Item 2.6</li>      <li>Item 2.7</li>      <li>Item 2.8</li>    </ol>  </li></ol><ol>  <li>Item 3    <ol class="submain1">      <li>Item 3.4 </li>      <li>Item 3.5</li>      <li>Item 3.6</li>      <li>Item 3.7</li>      <li>Item 3.8</li>      <li>Item 3.9</li>    </ol>  </li>  <li>Item 4</li></ol>

Can I continue numbers in a sublist using CSS?

Here's a complete solution that uses the counter-reset, counter-increment, and content properties to solve the continued number problem, and it uses the ::marker pseudo-element to solve the formatting problem. Credit to rachelandrew for the ::marker idea. There's no need for additional markup in the HTML (beyond the book-contents class that was specified in the original question).

As you can see in the test, this CSS handles the troublesome tenth chapter, with (1) its multi-digit chapter number that aligns properly on its decimal and (2) its long name that wraps with the proper hanging indentation.

ol.book-contents {
  counter-reset: chapter;
}

ol.book-contents li {
  list-style-type: upper-roman;
}

ol.book-contents li ol li {
  list-style-type: decimal;
  counter-increment: chapter;
}

ol.book-contents li ol li::marker {
  content: counter(chapter) '. ';
}

<!DOCTYPE html>
<title>Continued Numbering</title>

<ol class="book-contents">
  <li>Section One
    <ol>
      <li>Chapter One</li>
      <li>Chapter Two</li>
    </ol>
  </li>
  <li>Section Two
    <ol>
      <li>Chapter Three</li>
      <li>Chapter Four</li>
      <li>Chapter Five</li>
      <li>Chapter Six</li>
      <li>Chapter Seven</li>
      <li>Chapter Eight</li>
      <li>Chapter Nine</li>
      <li>Chapter Ten (shown so you can see its proper decimal alignment and its proper long-string wrapping behavior that honors the hanging indent)</li>
    </ol>
  </li>
</ol>

UL act like an OL = including START value

You can use CSS Counters and define a starting point in the counter-reset` CSS.

ul.my-list {  list-style: none;  counter-reset: item 17;  /* number should always be 1 LESS than your required starting number */}
.my-list li::before {  counter-increment: item;  content: counters(item, ".") ". ";}

<ul class="my-list">  <li>Item</li>  <li>Item</li>  <li>Item</li>  <li>Item</li>  <li>Item</li></ul>