Reputation: 13930
I can set a constant string for for each section, and need to preserve original hierarchical structure of nested OL
tags. I need something as:
1. First section
1.1. Some text here, and some fruits:
1.1.1. Apples
1.1.2. Oranges
1.2. Some more text here...
2. Second section
2.1. Some second text here, and some fruits:
2.1.1. Bannanas
2.1.2. Mangos
2.2. Some more second text here...
Where section-numbering I can do hard coding it, but all other need by automatic CSS... I try this but it is not working as expected: style (CSS) block them HTML block,
li:not(:last-child) {
padding-bottom: 9pt;
}
ol ol > li:first-child {
padding-top: 9pt;
}
/* hierarchical ordering: */
ol {
padding-left: 12pt;
counter-reset: item
}
li {
display: block
}
li:before {
content: counters(item, ".") ". ";
counter-increment: item
}
section > ol li::before {
position: relative;
left:-4pt;
}
/* hard coding section numbers to avoid risks on bad browsers */
#sec1 > ol > li::before { content: "1." counter(item) "."; }
#sec2 > ol > li::before { content: "2." counter(item) "."; }
#sec3 > ol > li::before { content: "3." counter(item) "."; }
<section id="sec1">
<h1>1. First section</h1>
<ol>
<li>Some text here, and some fruits:
<ol>
<li>Apples</li>
<li>Oranges</li>
</ol>
</li>
<li>Some more text here..</li>
</ol>
</section>
<section id="sec2">
<h1>2. Second section</h1>
<ol>
<li>Some second text here, and some frits:
<ol>
<li>Bannanas</li>
<li>Mangos</li>
</ol>
</li>
<li>Some more second text here..</li>
</ol>
</section>
similar to "How to prefix a word in a list number", "Insert CSS parent section counter for nested lists" and "How can I prefix ordered list item numbers with a static string using CSS?" but not duplicated.
need clean HTML5 + CSS, no Javascript.
Need to use modern Firefox and Chrome browsers only (no Microsoft).
Upvotes: 5
Views: 1872
Reputation: 944
I removed unnecessary codes and changed h1
s to h2
s.
Your counter counts only li
elements. You need to count h2
s with the same counter too.
Read about how CSS counter-reset
s create new scopes.
body {
counter-reset: item;
}
h2:before {
counter-increment: item;
content: counter(item) ". ";
}
ol {
list-style-type: none;
counter-reset: item;
}
li:before {
counter-increment: item;
content: counters(item, ".") ". ";
}
<section>
<h2>First section</h1>
<ol>
<li>Some text here, and some fruits:
<ol>
<li>Apples</li>
<li>Oranges</li>
</ol>
</li>
<li>Some more text here.</li>
</ol>
</section>
<section>
<h2>Second section</h1>
<ol>
<li>Some second text here, and some fruits:
<ol>
<li>Bannanas</li>
<li>Mangos</li>
</ol>
</li>
<li>Some more second text here.</li>
</ol>
</section>
Upvotes: 3