CODEWITHSUNDEEP
htmlcss
User501
User501

Reputation: 347

Need to create title with the list number

I need to create the title with the list numbers. But the list numbers are getting mismatch.

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 decimal numbers are starting with 2. But I need to start with Number 1.

Upvotes: 5

Views: 312

Answers (4)

Makis Milas
Makis Milas

Reputation: 147

That's because of the manipulation of the div with the Care section. Change the class according to the solution 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>

Upvotes: -1

shuberman
shuberman

Reputation: 1490

Try the below solution:

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 worked?

Well, basically you had to reset the counter()

How ?

By enclosing all your individual divs inside a parent tag (I used body tag. But you can use others based on your requirement.)

Then in the CSS, I provided a counter-reset in body tag class like this

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

and then used this reset counter in your h4.heading_numberlist::before like below

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

Upvotes: 1

Shomz
Shomz

Reputation: 37701

The most natural thing seems to be to reset/initialize the counter and then only increment it where you use it (Robert's answer with a proper selector is also perfectly fine):

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>

Upvotes: 2

Robert Cooper
Robert Cooper

Reputation: 2240

You can use :first-of-type instead of :first-child to achieve your desired result.

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>

Upvotes: 6

Related Questions