Html ordered list 1.1, 1.2 (Nested counters and scope) not working

html

responsive-design

css

best-practices

byAlex Kataev·Dec 2, 2024

To get HTML nested ordered list with custom numbering such as 1.1, 1.2, you can use CSS counters. Start a counter in the <ol> parent and increase it within <li> child nodes. Employ the counters function to format numbers with a period separator.

<ol>
  <li>...</li>
  <li>...
    <ol>
      <li>...</li>
    </ol>
  </li>
</ol>

ol {
  counter-reset: item; /*Waiter, can I start a new tab please?*/
}
li {
  display: block; /*Take up all the room you need buddy.*/
  counter-increment: item; /*Add one more beer to the tab!*/
}
li::before {
  content: counters(item, ".") ". "; /*Names on the guest list*/
}

This setup introduces a counter 'item' for list-item numbering and adds each li with the combined section number and sub-item number. Remember to safeguard sub-lists inside their principal <li> element to retain the numbering scope and proper hierarchical order.

Laying it out perfectly

Consistent layout

To achieve a consistent layout when using CSS counters for nested numbering, apply the display: block; property to li elements, ensuring uniform layout across all browsers. Reset the counter on the ol element with counter-reset: item; to keep the correct sequence consistent.

Adequate spacing

Adjust padding-right and margin-left on list objects to control spacing and alignment. This will prevent number dissolution into the text, maintaining a clean, readable structure.

li::before {
  padding-right: 0.5em; /*Lets give some personal space to our text*/
}

Note: avoid using margin-left on nested lists directly to circumvent unexpected numbering offset.

Finessing counters and display

Beware of CSS resets that make all list margins and paddings 0 - this might disrupt your layout. Selectively target lists to ensure your reset does not affect numbering:

ol {
  margin-left: 20px; /*Go on, take some space for yourself*/
  padding-left: 0;
}

To maintain the correct numerical reference, be sure to put your sublists within the correct scope by placing the <ol> element inside the parent <li>.

Advanced zone

Tackling complex nesting

In situational complexities associated with deep nesting, you may need to use multiple counters:

ol ol {
  counter-reset: sub-item; /*Starting a new tab for sub-items*/
}
li::before {
  content: counters(item, ".") " ";
}
ol ol li::before {
  content: counters(item, ".") counters(sub-item, ".") " ";
}

This permits us to have distinct sub-item numbering, maintaining orderliness amidst complex list structures.

Tailoring content with ::marker

With modern CSS, leveraging the ::marker pseudo-element presents more styling control for list markers:

li::marker {
  content: counters(item, '.') '. '; /*VIP guest marker style*/
}

This helps segregate style between the marker and the list item content. However, remember, some browsers do not support ::marker.

Fix 'em problems

Numbering error

Capture scenarios where numbers don't appear in order by ensuring your sublists are accurately nested within the scope of the counter-reset property whenever you're starting a new sequence!

Styling mismatches

Visual inconsistencies or alignment issues of a list may indicate an unintentional overwrite from global CSS or missing display property in your li elements.

explain-codes / Html / Html ordered list 1.1, 1.2 (Nested counters and scope) not working

Linked

How to keep indent for second line in ordered lists via CSS?



Ordered list (HTML) lower-alpha with right parentheses?



Removing ul indentation with CSS



How can you customize the numbers in an ordered list?



Proper way to make HTML nested list?

