Unexpected CSS counter reset issue encountered within nested elements

Utilizing css counters for the formatting of certain wiki pages is a common practice that I implement by adding CSS directly to the wiki page. One particular use case involves numbering headers using counters.

Below is a snippet of the code that demonstrates this functionality:

https://i.sstatic.net/xj95t.png

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<style>
    body {
    counter-reset: h1counter;
    }
    #main-content h1 {
        width: 100%;
        background-color: #D1DEF1;
        counter-reset: h2counter;
        border-top: 1px dotted #000;
        border-bottom: 1px dotted #000;
    }
    #main-content h1:before {
        content: counter(h1counter) ".\0000a0\0000a0";
        counter-increment: h1counter;
    }
    #main-content h2 {
        width: 100%;
        background-color: #D1DEF1;
        counter-reset: h3counter;
        border-top: 1px dotted #000;
        border-bottom: 1px dotted #000;
    }
    #main-content h2:before {
        content: counter(h1counter) "." counter(h2counter) ".\0000a0\0000a0";
        counter-increment: h2counter;
    }
</style>
<body>
    <div id="main-content">
        <h1>one</h1>
        <h2>one.one</h2>
        <h2>one.two</h2>
    </div>
</body>
</html> 

However, when incorporating additional formatting features from the wiki's page layout, the html structure may be altered as shown below (simplified):

<body>
    <div id="main-content">
        <div class="hzlayout">
            <h1>one</h1>
            <h2>one.one</h2>
        </div>
        <div class="hzlayout">
            <h2>one.two</h2>
        </div>
    </div>
</body>

This restructuring leads to an issue where the numbering format gets disrupted:

https://i.sstatic.net/LyVtL.png

The reset of the h2counter occurring outside of the .hzlayout div or upon entering the second .hzlayout div remains puzzling to me. Any assistance on resolving this matter would be greatly appreciated.

Thank you in advance for any guidance provided.

Answer №1

Place your counters at a shared ancestor element. Opt for counter-set instead of counter-reset to reset your counters. Like so:

  #main-content {
    counter-reset: h1counter h2counter h3counter;
  }
  #main-content h1 {
      width: 100%;
      background-color: #D1DEF1;
      counter-set: h2counter;
      border-top: 1px dotted #000;
      border-bottom: 1px dotted #000;
  }
  #main-content h1:before {
      content: counter(h1counter) ".\0000a0\0000a0";
      counter-increment: h1counter;
  }
  #main-content h2 {
      width: 100%;
      background-color: #D1DEF1;
      counter-set: h3counter;
      border-top: 1px dotted #000;
      border-bottom: 1px dotted #000;
  }
  #main-content h2:before {
      content: counter(h1counter) "." counter(h2counter) ".\0000a0\0000a0";
      counter-increment: h2counter;
  }
  #main-content h3:before {
      content: counter(h1counter) "." counter(h2counter)  "." counter(h3counter) ".\0000a0\0000a0";
      counter-increment: h3counter;
  }
<div id="main-content">
  <div class="hzlayout">
    <h1>one</h1>
    <h2>one.one</h2>
  </div>
  <div class="hzlayout">
    <h2>one.two</h2>
  </div>
  <div class="hzlayout">
    <h1>two</h1>
    <h2>two.one</h2>
    <h3>two.one.one</h3>
    <h3>two.one.two</h3>
  </div>
  <div class="hzlayout">
    <h2>two.two</h2>
    <h2>two.three</h2>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for personalizing text and icon colors in the TableSortText element of Material-ui

My Goal: I aim to empower users with the ability to apply customized styles to my EnhancedTable component by utilizing a styles object containing properties like headCellColor, headCellBackgroundColor, bodyCellColor, bodyCellBackgroundColor, and more. The ...

Event handler for the MouseLeave event is not successfully triggering when dealing with anchor

When viewing a link to a Codepen, the issue is most noticeable in Chrome: https://codepen.io/pkroupoderov/pen/jdRowv Sometimes, the mouseLeave event fails to trigger when a user quickly moves the cursor over multiple images, resulting in some images reta ...

JavaScript/CSS memory matching game

Just starting out in the world of programming and attempting to create a memory game. I've designed 5 unique flags using CSS that I want to use in my game, but I'm feeling a bit stuck with where to go next. I understand that I need some function ...

Expanding Gridview Width within a Container in ASP.Net: A Step-by-Step Guide

https://i.stack.imgur.com/ZaJE7.jpg After viewing the image above, I am facing a challenge with stretching and fixing a gridview to contain the entire div where it is placed. The issue arises when the gridview adjusts automatically based on the content&ap ...

Can you explain the process of implementing @media queries in SASS?

I am having some trouble understanding the syntax for media queries in SASS. I attempted to use this particular line of code, but it resulted in an error: @media screen (max-width: 1550px) #server-name left: 80% ...

Randomly choose one of 5 pages and insert an HTML element at different intervals using JavaScript, jQuery, MySQL, or PHP

Suppose we have the following HTML element: <img src="icon.png"> Our website consists of 5 pages: index.php products.php register.php about.php terms.php How can we randomly place this HTML element on one of the pages, ensuring it stays there for ...

Troubles encountered in retrieving values from various <select>/<option> elements

Having some trouble with the code below. I am attempting to retrieve the values of the selected options from my layout_select2. Currently, when I select 'multi_select' and then an option from 'layout_select2', I end up with the first v ...

Creating a new element in jQuery and placing it at the position where an element has been dragged

I need assistance with ensuring that each new item is added in the same position, regardless of any previous repositioning due to dragging. Currently, only the first appended item appears where I want it to be. Can someone please offer guidance? $("#butto ...

Turn off automatic spelling correction and predictive text in a content-editable section

I'm currently working on a cross-browser application using Script#. I've incorporated a contenteditable div where users can input text. However, I am facing an issue with the auto correct/auto completion feature altering the user's text. Co ...

Saving the name and corresponding value of a selected option element into separate fields using Angular framework

I have implemented the following code to generate a select field. The ngModel is successfully updating the value, but I am also looking to capture the name of the selected option and store it in a different field. Is there a solution to achieve this? ( & ...

Position Bootstrap 5 modal footer elements to the left and right for an enhanced visual

Can anyone assist me with customizing the Bootstrap 5 modal footer? I am looking to align a text (either using span or label) to the left and a button to the right within the modal footer. I came across this solution and attempted to implement it by cha ...

Show the image on top of the div block as the AJAX content loads

Implementing this task may seem easy and common, but I am struggling to figure it out! What should take five minutes has turned into an hour of frustration. Please lend me your expertise in getting this done. I have a div container block: <div cla ...

Image displayed in tooltip when hovering over

I have been experimenting with displaying an image in a tooltip when hovering over it. I came across a fantastic solution that suits my needs: Codepen CSS: @import "compass"; * { box-sizing: border-box; } .tooltip { position: relative; border-bo ...

Attempting to superimpose a CSS triangle arrow onto a Google Map

I'm currently working on incorporating a CSS arrow on top of a Google map as a design element. The concept involves a horizontal stripe with a downward arrow placed halfway through, and I aim to have this arrow overlay the Google map. Here is a snipp ...

What methods are available for drawing on an HTML canvas using a mouse?

I am facing two challenges: how can I create rectangles using the mouse on an HTML canvas, and why is my timer not visible? Despite trying various code snippets, nothing seems to be working. Grateful for any help! HTML: <!DOCTYPE html> <html lan ...

The wrapAll() method can be used to wrap list items within two columns

I am looking to group multiple li elements within two div containers by using jQuery's wrapAll method. The challenge lies in the fact that these items are rendered within a single <ul> element via a CMS. Here is the current setup: <ul> ...

PHP unable to retrieve ID from URL

Is there a way to extract an id from the URL when clicking a button for the purpose of deleting an item from a session? I have tried using $_GET but it doesn't seem to work. <form action="Shop.php?id= <?php echo $values["ProductCode"]; ?>" m ...

Standard tag for all JSP pages including doctype declaration and styles

I have multiple .jsp files and a page.tag that contains information about all the .jsp files. I don't want to include doctype, styles, and scripts in every single .jsp file, as it would require changing them individually if any updates are needed. Ins ...

The event resizing feature in fullCalendar2.6* seems to be experiencing some issues

After updating from fullCalendar 1.6 to 2.6, all functionality seems to be working except for eventResize. In the newer version, I am unable to see the resize arrow when attempting to adjust events, although it was functioning properly in the previous ver ...

Unexpected behavior with HTML Bootstrap's dl-horizontal layout

Despite having the div class "dl-horizontal" within the table, the dl-horizontal fields are displaying outside the table. Here is the code I used: <!DOCTYPE html> <html lang="en> <head> <title>Bootstrap Example</title> ...