Looking to generate a title incorporating the list number

I am struggling to create a title with list numbers, but unfortunately the numbers are not matching up correctly.

h4.heading_numberlist {
    margin-top: 12pt;
    margin-right: 0in;
    margin-bottom: 3pt;
    margin-left: 0in;
    page-break-after: avoid;
    font-size: 12pt;
    font-family: "Arial",sans-serif;
    color: black;
    font-weight: bold;
}
h4.heading_numberlist::before {
    content: counter(list-number, decimal) '. ';
}


div.nested3:not(:first-child) {
    counter-increment: list-number;
}
<div class="nested2">
    <h3 class="Section_Heading">Section</h3>
  <div class="nested3">
    <h4 class="heading_normal">Care</h4>
  </div>
  <div class="nested3">
    <h4 class="heading_numberlist">Services</h4>
  </div>
  <div class="nested3">
    <h4 class="heading_numberlist">Tests</h4>
  </div>
  <div class="nested3">
    <h4 class="heading_numberlist">Number</h4>
  </div>
</div>

The issue lies in the fact that the decimal numbers are starting from 2 instead of 1 as required by my design.

htmlcss

Answer №1

To achieve the desired outcome, you can opt for using :first-of-type over :first-child.

h4.heading_numberlist {
  margin-top: 12pt;
  margin-right: 0in;
  margin-bottom: 3pt;
  margin-left: 0in;
  page-break-after: avoid;
  font-size: 12pt;
  font-family: "Arial", sans-serif;
  color: black;
  font-weight: bold;
}

h4.heading_numberlist::before {
  content: counter(list-number, decimal) '. ';
}

div.nested3:not(:first-of-type) {
  counter-increment: list-number;
}
<div class="nested2">
  <h3 class="Section_Heading">Section</h3>
  <div class="nested3">
    <h4 class="heading_normal">Care</h4>
  </div>
  <div class="nested3">
    <h4 class="heading_numberlist">Services</h4>
  </div>
  <div class="nested3">
    <h4 class="heading_numberlist">Tests</h4>
  </div>
  <div class="nested3">
    <h4 class="heading_numberlist">Number</h4>
  </div>
</div>

Answer №2

To ensure the counter functions correctly, it is advisable to reset or initialize it and then only increment it where necessary. Robert's method with a suitable selector can also achieve this effectively:

body {counter-reset: list-number;}

h4.heading_numberlist {
    margin-top: 12pt;
    margin-right: 0in;
    margin-bottom: 3pt;
    margin-left: 0in;
    page-break-after: avoid;
    font-size: 12pt;
    font-family: "Arial",sans-serif;
    color: black;
    font-weight: bold;
}

h4.heading_numberlist::before {
    content: counter(list-number, decimal) '. ';
    counter-increment: list-number;
}
<div class="nested2">
<h3 class="Section_Heading">Section</h3>
<div class="nested3">
<h4 class="heading_normal">Care</h4>
</div>
<div class="nested3">
<h4 class="heading_numberlist">Services</h4>
</div>
<div class="nested3">
<h4 class="heading_numberlist">Tests</h4>
</div>
<div class="nested3">
<h4 class="heading_numberlist">Number</h4>
</div>
</div>

Answer №3

Here is a potential solution to your issue:

CSS

 body{
     counter-reset: my-sec-counter;
   }
    h4.heading_numberlist {
        margin-top: 12pt;
        margin-right: 0in;
        margin-bottom: 3pt;
        margin-left: 0in;
        page-break-after: avoid;
        font-size: 12pt;
        font-family: "Arial",sans-serif;
        color: black;
        font-weight: bold;
    }
    h4.heading_numberlist::before {
        counter-increment: my-sec-counter;
        content: "Section " counter(my-sec-counter) ". ";
    }


    div.nested3:not(:first-child) {
      counter-increment: list-number;
    }

HTML

<body>
    <div class="nested2">
    <h3 class="Section_Heading">Section</h3>
    <div class="nested3">
    <h4 class="heading_normal">Care</h4>
    </div>
    <div class="nested3">
    <h4 class="heading_numberlist">Services</h4>
    </div>
    <div class="nested3">
    <h4 class="heading_numberlist">Tests</h4>
    </div>
    <div class="nested3">
    <h4 class="heading_numberlist">Number</h4>
    </div>
    </div>

</body>

What solved the problem?

The key was resetting the counter(). This was achieved by wrapping all the individual divs inside a parent tag (in this example, the body tag was used).

Then, in the CSS, a counter-reset was set in the body tag class like so:

body{
     counter-reset: my-sec-counter;
   }

This reset counter was then utilized in the h4.heading_numberlist::before as shown below:

 h4.heading_numberlist::before {
        counter-increment: my-sec-counter;
        content: "Section " counter(my-sec-counter) ". ";
    }

Answer №4

The reason behind this issue is the modification of the div within the Care section. To resolve, adjust the class as outlined below.

h4.heading_numberlist {
    margin-top: 12pt;
    margin-right: 0in;
    margin-bottom: 3pt;
    margin-left: 0in;
    page-break-after: avoid;
    font-size: 12pt;
    font-family: "Arial",sans-serif;
    color: black;
    font-weight: bold;
}
h4.heading_numberlist::before {
    content: counter(list-number, decimal) '. ';
}


div.nested3:not(:first-child) {
  counter-increment: list-number;
}
<div class="nested2">
<h3 class="Section_Heading">Section</h3>
<div>
<h4 class="heading_normal">Care</h4>
</div>
<div class="nested3">
<h4 class="heading_numberlist">Services</h4>
</div>
<div class="nested3">
<h4 class="heading_numberlist">Tests</h4>
</div>
<div class="nested3">
<h4 class="heading_numberlist">Number</h4>
</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

Adjustable height for text input field

Is it possible to adjust the height of a textarea dynamically based on user input, rather than relying on scrollbars when content exceeds the width and height of the field? <textarea class="form-control"></textarea> For instance, if a user ty ...

javascripthtmlcsstwitter-bootstrap

Angular JS Profile Grid: Discover the power of Angular JS

I came across an interesting example that caught my attention: http://www.bootply.com/fzLrwL73pd This particular example utilizes the randomUser API to generate random user data and images. I would like to create something similar, but with manually ente ...

javascripthtmlarraysangularjstwitter-bootstrap-3

Acquiring Backlinks from an HTML Document

Looking to streamline a workplace process, I have a webpage with around 20-30 links that all begin with specific words: Dim Browser, strOut Set Browser = CreateObject("InternetExplorer.Application") With Browser .Visible = False .Navigate "http://anee ...

htmlwindowsvbscripthyperlink

Using jQuery and Flask-WTF to achieve live word count in a TextAreaField - a step-by-step guide!

I am interested in adding a real-time word count feature to a TextAreaField using jQuery. I found an example that I plan to use as the basis for my code: <html lang="en"> <head> <script src= "https://code.jquery.com/jquery ...

javascripthtmljquery

The displayed session in the Ionic App component.html is not appearing

When attempting to display a session in HTML named {{nama_cust}} on app.component.html, I encountered an issue where nothing appeared or it showed up blank. Is there an error in the code? Or is it possible that the app.component cannot process sessions? He ...

androidhtmlangularionic-frameworkionic4

Is it possible to change the background color of a MUI theme in ReactJS by using Css

Currently, I am utilizing Material UI to create a theme that is functioning correctly. However, upon adding <CssBaseline/> to the App.js file, it unexpectedly changes the background color to white instead of the intended #1f262a specified in the inde ...

javascriptcssreactjsmaterial-ui

Prevent button interaction until completion of modal animation using Bootstrap 4

I have incorporated a Bootstrap 4 modal in my website to display a large navigation menu. The navigation is triggered by a toggle button with a CSS animation that transforms a hamburger icon into an X. However, I encountered an issue where if the button i ...

javascriptjqueryhtmlcssbootstrap-4

Put a hyphen in front of the final three characters

I am looking for a way to automatically insert a dash before the last three characters in a text field, using either JavaScript or PHP. For example, if a user enters '1dsb3rs', I would like the input to change to '1dsb-3rs'. Whether the ...

javascriptphpjqueryhtml

Customizing Magento Options: Exploring ways to tweak the design of product options

I'm attempting to stack the options vertically rather than side by side. I'm struggling to figure out which code I need to adjust, my brain seems to be failing me on this one. Should I make changes to the product-options-wrapper? ...

htmlcssmagentodrop-down-menuthemes

Developing a robust system for managing classnames

I have a question regarding the article I found on Quora about Facebook's CSS class names structure. They mentioned that both Facebook and Google use a build system to convert developer-friendly class names into shorter ones to save bandwidth and crea ...

javascriptphpjquerycss

How can I properly integrate jQuery libraries, along with CSS, in a create-react-app project?

I'm currently working on incorporating the select2 jquery library into my React application, which was created using create-react-app. After adding jquery and select2 to my package.json file, I was able to get the javascript functionality to work pro ...

jquerycssnpmwebpackcreate-react-app

The width of the <ul> element does not properly accommodate the width of the <li> elements during the animation that updates the width of the <li>

I am currently working on implementing a typing animation in React. The li element has an animation that recursively changes its width from 0px to 100%. However, I have noticed that when the width of the li changes, the parent ul does not adjust its width ...

javascripthtmlcssreactjs

Utilizing JQuery for adjusting the CSS top property

I needed to overlay text on an image, so I used CSS for this purpose. However, as I incorporated Bootstrap and hesitated to include absolute positioning in the CSS file, I faced issues with centering the text when resizing the image. To tackle this problem ...

jquerycss

Changing the coordinates from screen to page

Is it possible to determine the coordinates of a point on the actual browser page, given its screen coordinates? https://i.sstatic.net/iC938.png The issue is demonstrated in this small image. I have a point (ScreenX, ScreenY) and would like to convert it ...

javascripthtml

Using PHPMailer to send an HTML page via email

I am attempting to email this HTML page using unlayer.com. I have tried using $mail->isHtml(true), ... msgHtml... but the email client keeps showing the code instead of the HTML page. Any suggestions on how to fix this? Here is my code: $sql = "SE ...

phphtmlemailphpmailer

What is the best way to compare two CSS files and selectively replicate just the discrepancies?

Is there a way to compare and copy different information from CSS files into another file? For instance, if I have two CSS files named a.css and b.css, is there a method to automatically select and copy only the differences between the two files? Thank y ...

htmlcssfileweb

Hovering triggers the appearance of Particle JS

I am attempting to add particle js as the background for my website. I have tried implementing this code snippet: https://codepen.io/nikspatel/pen/aJGqpv My CSS includes: position: fixed; z-index: -10; in order to keep the particles fixed on the screen e ...

javascripthtmlcss

Trouble linking jQuery file to HTML page

While working on a project, I stumbled upon a code that I am editing. You can find the original code here: However, when I try to link the .js file, it fails to load properly and displays a single large image instead of a carousel of images. Thank you fo ...

javascriptjqueryhtmlcss

Facing the issue of missing data-icons while retrieving HTML content through AJAX requests

My php function generates grid data that appears like this: <div id="_gridData"> <div class="ui-grid-b"> <div class="ui-block-a mobile-grid-header">&nbsp;</div> <div class="ui-bloc ...

jqueryhtmljquery-mobile

Need to fix the problem of loading SVG files one by one and the issue with fading or replacing them

I'm looking to insert svg files into a single div and I've managed to do it successfully on this link: var div_svg = d3.select("div#example"); svg1 = "https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg"; svg2 = "https://upload.wik ...

javascriptcssd3.jssvg