Leveraging CSS to automatically number nested sections

Question

Leveraging CSS to automatically number nested sections

Assume we have an example HTML or XML document structured like this:

<body>
   <section>
      <h1>This should be numbered 1</h1>
      <section>
        <h1>This should be numbered 1.1</h1>
        <p>blah</p>
      </section>
      <section>
        <h1>This should be numbered 1.2</h1>
        <p>blah</p>
      </section>
   </section>
   <section>
      <h1>This should be numbered 2</h1>
      <section>
        <h1>This should be numbered 2.1</h1>
        <p>blah</p>
      </section>
   </section>
</body>

This specific layout is just for demonstration purposes, as the number of child-sections within a section can vary, and sections can be nested to any extent.

The question at hand is whether it's possible to utilize CSS (counters and generated content) to automatically generate the desired section number before each section title.

Previous examples mainly showcase this functionality with nested lists using 'counter-reset' on OL and 'counter-increment' on LI tags. However, in this case, it's essential for the 'section' element to both reset for its child-sections and increment relative to its parent section. Combining these behaviors under one element name seems to pose challenges.

html css css-counter

Answer 1

Answer №1

In this scenario, it is recommended to utilize CSS counters.

Improved solution (better). A more versatile approach would involve resetting the counter on the body initially instead of the section:first-child, as well as on any immediate next sibling of the h1.

body,
section h1 + * {
    counter-reset: section 0;
}

Enhanced solution. After receiving feedback in the comments about the limitations of my initial solution, I have revised it. The corrected version below should function correctly regardless of the number of nested or sibling sections.

section:first-child,
section h1 + section {
    counter-reset: section 0;
}
section h1:before {
    counter-increment: section;
    content: counters(section, ".") " ";
}

<section>
    <h1>This should be numbered 1</h1>
    <section>
        <h1>This should be numbered 1.1</h1>
        <p>blah</p>
    </section>
    <section>
        <h1>This should be numbered 1.2</h1>
        <p>blah</p>
    </section>
    <section>
        <h1>This should be numbered 1.3</h1>
        <section>
            <h1>This should be numbered 1.3.1</h1>
            <p>blah</p>
        </section>
        <section>
            <h1>This should be numbered 1.3.2</h1>
            <p>blah</p>
        </section>
    </section>
    <section>
        <h1>This should be numbered 1.4</h1>
        <p>blah</p>
    </section>
</section>
<section>
    <h1>This should be numbered 2</h1>
    <section>
        <h1>This should be numbered 2.1</h1>
        <p>blah</p>
    </section>
    <section>
        <h1>This should be numbered 2.2</h1>
        <p>blah</p>
    </section>
</section>

Original (flawed). There is a tricky aspect in this situation: the counter must increment for every subsequent section. This can be achieved by using the section + section selector:

section {
    counter-reset: section;
}
section + section {
    counter-increment: section;
}
section h1:before {
    counter-increment: section;
    content: counters(section, ".") " ";
}

<section>
    <h1>This should be numbered 1</h1>
    <section>
        <h1>This should be numbered 1.1</h1>
        <p>blah</p>
    </section>
    <section>
        <h1>This should be numbered 1.2</h1>
        <p>blah</p>
    </section>
</section>
<section>
    <h1>This should be numbered 2</h1>
    <section>
        <h1>This should be numbered 2.1</h1>
        <p>blah</p>
    </section>
</section>

Answer 2

In this scenario, it is recommended to utilize CSS counters.

Improved solution (better). A more versatile approach would involve resetting the counter on the body initially instead of the section:first-child, as well as on any immediate next sibling of the h1.

body,
section h1 + * {
    counter-reset: section 0;
}

Enhanced solution. After receiving feedback in the comments about the limitations of my initial solution, I have revised it. The corrected version below should function correctly regardless of the number of nested or sibling sections.

section:first-child,
section h1 + section {
    counter-reset: section 0;
}
section h1:before {
    counter-increment: section;
    content: counters(section, ".") " ";
}

<section>
    <h1>This should be numbered 1</h1>
    <section>
        <h1>This should be numbered 1.1</h1>
        <p>blah</p>
    </section>
    <section>
        <h1>This should be numbered 1.2</h1>
        <p>blah</p>
    </section>
    <section>
        <h1>This should be numbered 1.3</h1>
        <section>
            <h1>This should be numbered 1.3.1</h1>
            <p>blah</p>
        </section>
        <section>
            <h1>This should be numbered 1.3.2</h1>
            <p>blah</p>
        </section>
    </section>
    <section>
        <h1>This should be numbered 1.4</h1>
        <p>blah</p>
    </section>
</section>
<section>
    <h1>This should be numbered 2</h1>
    <section>
        <h1>This should be numbered 2.1</h1>
        <p>blah</p>
    </section>
    <section>
        <h1>This should be numbered 2.2</h1>
        <p>blah</p>
    </section>
</section>

Original (flawed). There is a tricky aspect in this situation: the counter must increment for every subsequent section. This can be achieved by using the section + section selector:

section {
    counter-reset: section;
}
section + section {
    counter-increment: section;
}
section h1:before {
    counter-increment: section;
    content: counters(section, ".") " ";
}

<section>
    <h1>This should be numbered 1</h1>
    <section>
        <h1>This should be numbered 1.1</h1>
        <p>blah</p>
    </section>
    <section>
        <h1>This should be numbered 1.2</h1>
        <p>blah</p>
    </section>
</section>
<section>
    <h1>This should be numbered 2</h1>
    <section>
        <h1>This should be numbered 2.1</h1>
        <p>blah</p>
    </section>
</section>

Answer 3

Answer №2

ul{
text-align: center;
}

<ul>
  <li>sample</li>
  <li>text</li>
  <li>here</li>
  <li>List</li>
</ul>

This code snippet has not been tested yet, but it should function properly.

Answer 4

ul{
text-align: center;
}

<ul>
  <li>sample</li>
  <li>text</li>
  <li>here</li>
  <li>List</li>
</ul>

This code snippet has not been tested yet, but it should function properly.

Leveraging CSS to automatically number nested sections

Answer №1

Answer №2

Similar questions

Is there a way to automatically transfer the ID from the first table to the id_position field in the second table upon clicking submit?

Looking for assistance with HTML regex (even though I understand it's not the recommended approach)

Generate a link that can easily be shared after the content has loaded using

Replicate the preceding input data by simply clicking a button

Customizing Material UI Select for background and focus colors

Is there a way to adjust the positioning of an image within a <div> element?

Looking for assistance with CSS selectors for the following structure

Avoid the ability for individuals to interact with the icon embedded within a button

How to add data to Laravel after successful ajax request

Problem with Jquery Ajax, failing to recognize option values

Position the button at the bottom of the page with MUI v5 in a React application

"Revamp the appearance of the div element upon clicking elsewhere on the

Creating visual content on Canvas using JavaScript

Attempting to open and display the contents of a text file (.txt) within a modal dialog box upon clicking a button

Getting the css property scaleX with JQuery is as simple as executing the

I'm always puzzled by why my attempts to spell a word in a foreign language with accent symbols somehow result in a strange appearance when it comes to bootstrapping

When the parent element is already set to justify its content with flexbox, you can ensure equal heights for CSS classes by utilizing

MAC Safari is not registering input fields

Assertion error: 1 does not match the expected value of 6

The value retrieved by JQuery attr remains constant