Can I continue numbers in a sublist using CSS?-CodePudding

I want to style the following HTML so that the chapter numbers go in sequence 1, 2, 3, even though the third number is in a different list than the first two.

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

<style>
  ol.book-contents li {
    list-style-type: upper-roman;
  }
  ol.book-contents ol li {
    list-style-type: decimal;
  }
</style>

<ol >
  <li>Section One
    <ol>
      <li>Chapter One</li>
      <li>Chapter Two</li>
    </ol>
  </li>
  <li>Section Two
    <ol>
      <li>Chapter Three</li>
    </ol>
  </li>
</ol>

That is, I'd like the output to look like this:

 I. Section One
    1. Chapter 1
    2. Chapter 2
II. Section Two
    3. Chapter 3

Is there a way I can do this with CSS?

CodePudding user response：

Here's kind of a cruddy but perhaps passable CSS implementation that may be good enough as long as (1) you don't care that the chapter numbers don't align on the decimal point, and (2) you don't have a chapter name that's long enough to wrap:

ol.book-contents {
    counter-reset: c;
}
ol.book-contents li {
    list-style-type: upper-roman;
}
ol.book-contents ol li {
    list-style: none;
}
ol.book-contents ol li:before {
    content: counter(c,decimal) '.  ';
    counter-increment: c;
    /* quick & dirty alignment */
    margin-left: -7rem;
    padding-left: 3rem;
    text-indent: -3rem;
}

CodePudding user response：

There's the possiblility to create an offset for the counting of an ol using the start attribute, like

<ol start="3">

In your case that would be

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

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

<ol >
  <li>Section One
    <ol>
      <li>Chapter One</li>
      <li>Chapter Two</li>
    </ol>
  </li>
  <li>Section Two
    <ol start="3">
      <li>Chapter Three</li>
      <li>Chapter Four</li>
    </ol>
  </li>
</ol>