Customize nested ordered lists numbering - html

I have nested lists of which I can't change the structure of. The first li element must not be included in the numbering, however, its children must ALL be numbered. Here is the JsFiddle.
ol li ol {
counter-reset: section;
list-style-type: none;
}
ol li ol li::before {
counter-increment: section;
content: counters(section, ".") " ";
}
<ol id="root">
<li>List item two with subitems (this should not be numbered):
<ol id="toc0">
<li>Subitem 1 (This should be numbered 1)</li>
<li>Subitem 2 (This should be 2)</li>
<ol>
<li> subitem (this should be 2.1)</li>
<li> subitem (this should be 2.2)</li>
<ol>
<li> subitem (This should be 2.2.1)</li>
<li> subitem (This should be 2.2.2)</li>
</ol>
</ol>
<li>Subitem 3 (This should be 3)</li>
<li>Subitem 4 (This should be 4)</li>
</ol>
</li>
</ol>


You have invalid markup, ol cannot be a direct child of another ol. You must update the HTML to fix it, your existing CSS works fine with a little edit.
ol {
list-style: none;
}
ol li ol {
counter-reset: section;
}
ol li ol li::before {
counter-increment: section;
content: counters(section, ".") " ";
}
<ol id="root">
<li>List item two with subitems (this should not be numbered):
<ol id="toc0">
<li>Subitem 1 (This should be numbered 1)</li>
<li>
Subitem 2 (This should be 2)
<ol>
<li>subitem (this should be 2.1)</li>
<li>
subitem (this should be 2.2)
<ol>
<li> subitem (This should be 2.2.1)</li>
<li> subitem (This should be 2.2.2)</li>
</ol>
</li>
</ol>
</li>
<li>Subitem 3 (This should be 3)</li>
<li>Subitem 4 (This should be 4)</li>
</ol>
</li>
</ol>

Related

Css counters difference in output for marker and before pseudo elements

I am going through this link to understand more on counters and how nested counter work,
I have the css and html as following
<style>
ol {
counter-reset: my-counter 0;
list-style-type: none;
}
li::before {
content: counters(my-counter, '.');
counter-increment: my-counter;
}
</style>
With the html as
<ol>
<li> First
<ol>
<li> Eleven </li>
<li> Twelve </li>
</ol>
</li>
<li> Second
<ol>
<li> Twenty-one </li>
<li> Twenty-two </li>
</ol>
</li>
</ol>
Here i am getting the content as expected, like 1 and 1.1, however changing the before to marker pseudo element i.e li::marker gives a value like 0 and 0.0.
Although when i use only this css, the output is as expected
li::marker {content: counters(list-item, '.') ' ';}
I couldn't get why the before and marker pseudo elements are generating different output for this list.

The issue is related to the allowed properties within ::marker. content is allowed but not counter-increment so it's working but without incrementing the counter.
If you move the incrementation to li it works:
ol {
counter-reset: my-counter 0;
list-style-type: none;
}
li::marker {
content: counters(my-counter, '.');
}
li {
counter-increment: my-counter;
}
<ol>
<li> First
<ol>
<li> Eleven </li>
<li> Twelve </li>
</ol>
</li>
<li> Second
<ol>
<li> Twenty-one </li>
<li> Twenty-two </li>
</ol>
</li>
</ol>
More detail about the allowed properties can be found in the Specification: https://www.w3.org/TR/css-lists-3/#marker-properties

HTML CSS Issues in implementing nested ordering which includes numbers, alphabets and roman numbers

I have a requirment to implement a nested ordered structured html page very similar like this. Most of the part is done but I got stuck at 1 place in ordering of number. Please suggest.
Below is the required structure and my code.
1.Main Line 111111111
1.1 Sub Line 111111111
a.aaaaaaaaaaa
b.bbbbbbbbbbb
2.Main Line 22222222
2.1 Sub Line 111111111
a.aaaaaaaaaaa
b.bbbbbbbbbbb
2.2 Sub Line 22222222
a.aaaaaaaaaaa
i.moreeeeee
ii.moreeeeee
b.bbbbbbbbbbb
i.moreeeeee
ii.moreeeeee
But getting some overlapped numbers as shown in image:
Please suggest where I am doing wrong?
Here in my code:
ol {
counter-reset: item;
}
ol>li {
counter-increment: item;
}
.sub-num-list>li:before {
content: counters(item, ".") " ";
margin-left: -20px;
}
.sub-num-list>ol>li:before {
content: counters(item, ".") " ";
margin-left: -20px;
}
.sub-albhabatical-list>li {
list-style-type: lower-alpha;
margin-left: 20px;
}
.sub-roman-list>li {
list-style-type: lower-roman;
margin-left: 20px;
}
<div class="layout__wrapper">
<ol>
<li>Main Line 111111111
<ol class="sub-num-list">
<li>Sub Line 111111111
<ol class="sub-albhabatical-list">
<li>aaaaaaaaaaa</li>
<li>bbbbbbbbbbb</li>
</ol>
</li>
</ol>
</li>
<li>Main Line 22222222
<ol class="sub-num-list">
<li>Sub Line 111111111
<ol class="sub-albhabatical-list">
<li>aaaaaaaaaaa</li>
<li>bbbbbbbbbbb</li>
</ol>
</li>
<li>Sub Line 22222222
<ol class="sub-albhabatical-list">
<li>aaaaaaaaaaa
<ol class="sub-roman-list">
<li>moreeeeee</li>
<li>moreeeeee</li>
</ol>
</li>
<li>bbbbbbbbbbb
<ol class="sub-roman-list">
<li>moreeeeee</li>
<li>moreeeeee</li>
</ol>
</li>
</ol>
</li>
<li>Sub Line 111111111
<ol class="sub-albhabatical-list">
<li>aaaaaaaaaaa</li>
<li>bbbbbbbbbbb</li>
</ol>
</li>
</ol>
</li>
</ol>
</div>

You were wrong in the use of your :before and the list counter CSS property. Also you probably got lost in CSS selectors and ended up with undesired effects.
I fixed it for you, hopefully this is what you were looking for
li {
display: block
}
.main-num-list, .sub-num-list {
counter-reset: item
}
.main-num-list>li:before,
.sub-num-list>li:before {
content: counters(item, ".") " ";
counter-increment: item
}
.sub-albhabatical-list {
counter-reset: letter;
}
.sub-albhabatical-list > li:before {
content: counter(letter, lower-alpha) ". ";
counter-increment: letter;
}
.sub-roman-list {
counter-reset: roman;
}
.sub-roman-list > li:before {
content: counter(letter, lower-roman) ". ";
counter-increment: roman;
}
<div class="layout__wrapper">
<ol class="main-num-list">
<li>Main Line 111111111
<ol class="sub-num-list">
<li>Sub Line 111111111
<ol class="sub-albhabatical-list">
<li>aaaaaaaaaaa</li>
<li>bbbbbbbbbbb</li>
</ol>
</li>
</ol>
</li>
<li>Main Line 22222222
<ol class="sub-num-list">
<li>Sub Line 111111111
<ol class="sub-albhabatical-list">
<li>aaaaaaaaaaa</li>
<li>bbbbbbbbbbb</li>
</ol>
</li>
<li>Sub Line 22222222
<ol class="sub-albhabatical-list">
<li>aaaaaaaaaaa
<ol class="sub-roman-list">
<li>moreeeeee</li>
<li>moreeeeee</li>
</ol>
</li>
<li>bbbbbbbbbbb
<ol class="sub-roman-list">
<li>moreeeeee</li>
<li>moreeeeee</li>
</ol>
</li>
</ol>
</li>
<li>Sub Line 111111111
<ol class="sub-albhabatical-list">
<li>aaaaaaaaaaa</li>
<li>bbbbbbbbbbb</li>
</ol>
</li>
</ol>
</li>
</ol>
</div>
You can find some more informations in similar questions about list counter formatting and nested different list-style-type counters

Just add this style in your style section.
.sub-num-list{
list-style-type: none;
}
It'll remove overlapping of numbers

HTML ordered list inside div [duplicate]

This question already has answers here:
CSS counter-reset on nested list
(3 answers)
Closed 4 years ago.
I formatted the ordered list with sub-items. Another <ol> is inside a <div> and the numbers are wrong; why?
OL {
counter-reset: item;
padding-left: 10px;
}
LI {
display: list-item
}
LI:before {
content: counters(item, ".") " ";
counter-increment: item
}
<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
</ol>
</li>
</ol>
<hr />
<div>
<ol>
<li>one
<ol>
<li>one.one</li>
</ol>
</li>
</ol>
</div>
Please check this:
http://jsfiddle.net/PTbGc/1265/

You can use separate div tag for that. Check this snippets
OL {
counter-reset: item;
padding-left: 10px;
}
LI {
display: list-item
}
LI:before {
content: counters(item, ".") " ";
counter-increment: item
}
<div>
<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
</ol>
</li>
</ol>
</div>
<hr />
<div>
<ol>
<li>one
<ol>
<li>one.one</li>
</ol>
</li>
</ol>
</div>

you can use separate div tags
ol {
counter-reset: item
}
li {
display: block
}
li:before {
content: counters(item, ".") " ";
counter-increment: item
}
<div>
<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
</li>
<li>three
<ol>
<li>three.one</li>
<li>three.two
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</li>
</ol>
</li>
<li>four</li>
</ol>
<div>

HTML/CSS multilevel nested lists numbering [duplicate]

This question already has answers here:
Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css?
(12 answers)
Closed 8 years ago.
Is there a way to achieve the below numbering using straight HTML and CSS lists (<ul> or <ol>)?
1. Link 1
2. Link 2
3. Link 3
3.1. Link 3.1
3.2. Link 3.2
3.3. Link 3.3
4. Link 4
4.1. Link 4.1
4.1.1 Link 4.1.1
4.1.2 Link 4.1.2
5. Link 5
Thanks in advance!

You could use CSS counters:
ol {
counter-reset: section;
list-style-type: none;
}
li:before {
counter-increment: section;
content: counters(section, ".") ". Link " counters(section, ".") " ";
}
Working Demo (also on JSBin):
ol {
counter-reset: section;
list-style-type: none;
}
li:before {
counter-increment: section;
content: counters(section, ".") ". Link " counters(section, ".") " ";
}
<ol>
<li></li>
<li></li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li>
<ol>
<li>
<ol>
<li></li>
<li></li>
</ol>
</li>
</ol>
</li>
<li></li>
</ol>

<style>
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }
</style>
<html>
<body>
<ol>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3
<ol >
<li>Link 3.1</li>
<li>Link 3.2</li>
<li>Link 3.3
<ol >
<li>Link 3.3.1</li>
<li>Link 3.3.2</li>
<li>Link 3.3.3</li>
</ol>
</li>
</ol>
</li>
</ol>
</body>
</html>

Three level decimal ordered list CSS

I have a three level ordered list in html that I would like to give a style as following:
1. Item 1
1.1 Item 2
1.1.1 Item 3
An example of the html is in the next plunker:
http://plnkr.co/edit/DqhZ5pJILTUHGSNaA1vm?p=preview
I have done a style recommended in the internet with css like
ol { counter-reset: item }
li:before { content: counters(item, "."); counter-increment: item }
but it doesn't seem working.
Please, any comment related would be a great help.

Use the following code:
html:
<ol>
<li> Should be Item 1
<ol>
<li> Should be Item 1.1</li>
<li> Should be Item 1.2</li>
<li> Should be Item 1.3
<ol>
<li> Should be Item 1.3.1
</ol>
<li>Should be Item 1.4</li>
</ol>
</li>
<li> Should be Item 2</li>
</ol>
css:
ol { counter-reset: item }
ol li { display: block }
ol li:before { content: counters(item, ".") ". "; counter-increment: item }

your css code is almost fine, see http://plnkr.co/edit/wmGhz7V6CKqZ7MmHIoDF?p=preview
you have an extra </li><li> after level 1, so your markup becomes
<ol>
<li> Should be Item 1
<ol>
<li> Should be Item 1.1</li>
<li> Should be Item 1.2</li>
<li> Should be Item 1.3
<ol>
<li> Should be Item 1.3.1</li>
</ol>
</li>
<li>Should be Item 1.4</li>
</ol>
</li>
<li> Should be Item 2</li>
</ol>
and in your css I've removed the base list style for ol with list-style: none;