Style an Ordered List like “X.X” based on list sta

Question

I would like to style an ordered list like this for a client, but am not sure exactly how. The client wishes to have a policy page, with several sections. Each section has several statements, which are numbered like so: "x.1, x.2" (where "x" is dependent on the section number). Here is what the HTML looks like for the sections:

<div class="customListBox">
    <h2>Section 1</h2>
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>

    <h2>Section 2</h2>
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
    </ol>
</div>

This is what is should wind up showing:

---

Section 1

1.1 Item 1
1.2 Item 2
1.3 Item 3

Section 2

2.1 Item 1
2.2 Item 2

---

I have looked at several other questions, but almost all of them involve nested lists, which I wish to stay away from, as this induces problems with other site styles. I am aware of the CSS counters, but am unsure if I can use them without nesting lists. Also, the page is a dynamic JSP page, so if there is a way to do this in JSP, that would be sufficient.

Related question of mine that gives entire scope of project...I think it is too unclear, so I started this one with barebones code. I felt that even if I edited the other one, the other answers and comments on the page (caused by my first and very unclear question) could cause confusion to future visitors. Style an Ordered List like "1.1, 1.2, 1.3"

This question is similar, but involves nested lists, which I need to avoid due to existing styles. Also, I do not want "x" numbers, or "x.x.x" numbers; I only want "x.x" numbers. Can ordered list produce result like "1, 1.2, 1.3"?

Let me know if I should clarify anything!

Answer 1

You can use CSS Counters and the counter-increment declaration.

Edit: Updated snippet to use class name and adjusted the pseudo-element positioning.

Edit 2: Updated snippet to only target first level list items.

 /* Whatever your defaults are */
ol {
  list-style-type:upper-alpha;
  position:relative;
}

/* Targets only .customListBox's first level child ol elements */
.customListBox > ol { 
    counter-increment: lists;
    counter-reset: items;
    list-style-type: none;
}

 /* Targets only the first level child li elements of the first ol's in .customListBox*/
.customListBox > ol > li::before {
    content: counters(lists, "", decimal) "." counters(items, "", decimal) " ";
    counter-increment: items;
    position:absolute;
    left: 0;
}

<div class="customListBox">
  <h2>Section 1</h2>
  <ol>
    <li>Item</li>
    <li>Item
      <ol>
        <li>Sub Item</li>
        <li>Sub Item</li>
        <li>Sub Item</li>
      </ol>
    </li>
    <li>Item</li>
  </ol>

  <h2>Section 2</h2>
  <ol>
    <li>Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ol>
</div>