Menu
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.
581
Right-click the number you want to change. Click Set Numbering Value. In the Set value to: box, use the arrows to change the value to the number you want. Tip: Tempting as it is to manually change the numbers in a list, don't do it.
The Title column is a main column that is used to open, edit and work with the items in a SharePoint list. Another important usage of the Title column is that this column is used in the View settings in 3 ways: Display the Title in text format, text (linked to item), and text (linked to item with edit menu).
Step 1: Click anywhere on the table that needs a heading. It doesn't matter what order you label your tables in – Word will renumber them automatically. Under 'Options', the label should read 'Table' and the position should read 'Above selected item'. Step 3: Type your heading into the 'Caption' box at the top.
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>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>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) ". ";
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
