CODEWITHSUNDEEP
htmlcsshtml-lists
Cary Millsap
Cary Millsap

Reputation: 832

Can I continue numbers in a sublist using CSS?

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 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>
    </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?

Upvotes: 1

Views: 267

Answers (3)

Cary Millsap
Cary Millsap

Reputation: 832

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>

Upvotes: 1

icy121
icy121

Reputation: 131

You can utilize CSS counters to maintain custom list numbers at the same levels.

Basically there are 3 main CSS properties you set

  • counter-reset: keyword - when you need to start a new list, you maintain a counter by a keyword (sublist-counter). Treat it like defining a variable for a counter.
  • counter-increment: keyword - on you element render, increment a counter using the keyword whenever the selector element/pseudo element is rendered in the DOM
  • content: counter(keyword) - to access the current value of the counter

Using ::before pseudo element you can define your own list style and set the list-style on the ol as none for your use-case

Learn more about CSS counters

body {
  counter-reset: sublist-counter;                       /* Set a counter named 'section', and its initial value is 0. */
}

ol.sublist{
  list-style:none;
  padding-left: 10px;
}

ol.sublist > li::before {
  counter-increment: sublist-counter;
  content: counter(sublist-counter)  ". ";
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<ol class="book-contents">
  <li>Section One
    <ol class="sublist">
      <li>Chapter One</li>
      <li>Chapter Two</li>
    </ol>
  </li>
  <li>Section Two
    <ol class="sublist">
      <li>Chapter Three</li>
    </ol>
  </li>
</ol>
</body>
</html>

Upvotes: 1

Johannes
Johannes

Reputation: 67778

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 class="book-contents">
  <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>

Upvotes: 0

Related Questions