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>
Related
How to organize html code (with usage ol\li, ul\li ect.) to present such lists (with sublists)?
1. Section
1.1. subsection
1.2. subsection
1.3. subsection
2. Section
3. Section
3.1. subsection
• text
• text
• text
3.2. subsection
3.3. subsection
ol {
counter-reset: section;
list-style-type: none;
}
li:before {
content: counters(section, ".") ". ";
counter-increment: section;
}
<ol>
<li>Section
<ol>
<li>subsection</li>
<li>subsection</li>
<li>subsection</li>
</ol>
</li>
<li>Section</li>
<li>Section
<ol>
<li>subsection</li>
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
<li>subsection</li>
<li>subsection</li>
</ol>
</li>
</ol>
note: It is not the same that I want enter image description here
So far, using has produced only 1, 1.1, 1.2, 1.3, 2., 3., 3.1., 3.2., 3.3, 3.4., 3.5., 3.6.
not 1, 1.1, 1.2, 1.3, 2., 3., 3.1., •, •, •, 3.2., 3.3,
I think thats all, thanks!
I think the issue is your li:before also applies to the elements in the unordered list. Try this out and let me know if it works:
ol {
counter-reset: section;
list-style-type: none;
}
li:before {
content: counters(section, ".") ". ";
counter-increment: section;
color: #BA4917;
}
ul li:before {
content: "";
}
<ol>
<li>Section
<ol>
<li>subsection</li>
<li>subsection</li>
<li>subsection</li>
</ol>
</li>
<li>Section</li>
<li>Section
<ol>
<li>subsection
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
</li>
<li>subsection</li>
<li>subsection</li>
</ol>
</li>
</ol>
I want to make an unordered list the has an ordered second level that continues counting it's points. I know I can do it with <ol start="Previous number+1"> but is it possible to continue list automatically? Below is an example as well as example in the picture.
First
a. first
b. second
Second
c. third
This is how I've done it:
<ul>
<li>ASV:<br/><ol type="I">
<li>HP</li><li>Dell</li><li>Apple</li><li>Google</li><li>Microsoft</li><li>EVGA Corporation</li><li>Maingear</li><li>Origin PC</li><li>Velocity Micro</li><li>Vizio</li></ol>
</li>
<li>Ķīna:<br/><ol type="I" start="11">
<li>Lenovo</li><li>Huawei</li><li>Founder</li><li>Hasee</li><li>Lemote</li></ol>
</li>
<li>Japāna:<br/><ol type="I" start="16">
<li>Panasonic</li><li>Sharp</li><li>Toshiba</li><li>VAIO</li>
</ol></li>
<li>Taivāna:<br/><ol type="I" start="20">
<li>Acer</li><li>Asus</li><li>Clevo</li><li>Gigabyte Technology</li><li>Via</li>
</ol></li>
I'm just a beginner so I'm sorry if the format isn't the greatest.
This is the example
you can do that with css Counter :
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
https://developer.mozilla.org/en-US/docs/Web/CSS/counters
sample code:
ul#my-list {
list-style: none;
counter-reset: nRef;
counter-reset: aRef;
}
ul#my-list>li { counter-increment: nRef; }
ul#my-list>li:before { content: counter(nRef) '. '; }
ul#my-list>li>ul { list-style: none; }
ul#my-list>li>ul>li { counter-increment: aRef; }
ul#my-list>li>ul>li:before { content: counter(aRef, lower-alpha) '. '; }
<ul id="my-list">
<li>ASV:
<ul>
<li>HP</li><li>Dell</li><li>Apple</li><li>Google</li>
<li>Microsoft</li><li>EVGA Corporation</li><li>Maingear</li>
<li>Origin PC</li><li>Velocity Micro</li><li>Vizio</li>
</ul>
</li>
<li>Ķīna:
<ul>
<li>Lenovo</li><li>Huawei</li><li>Founder</li>
<li>Hasee</li><li>Lemote</li>
</ul>
</li>
<li>Japāna:
<ul>
<li>Panasonic</li><li>Sharp</li><li>Toshiba</li><li>VAIO</li>
</ul>
</li>
<li>Taivāna:
<ul>
<li>Acer</li><li>Asus</li><li>Clevo</li>
<li>Gigabyte Technology</li><li>Via</li>
</ul>
</li>
</ul>
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
I have problem with css styling of my Ordered List.
I have my HTML code:
ol {
counter-reset: item
}
li {
display: block
}
li:before {
content: counters(item, ".")" ";
counter-increment: item
}
<ol>
<li class="sub">one</li>
<li class="">two
<ol>
<li class="small">two.one</li>
<li class="small">two.two</li>
<li class="small">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>
And I need to hide number value from 1 one, 2 two, 3 three and 4 four
Someone has idea, how to do that, please?
You can mimick the behavior you are looking for by setting the font-size to 0px and this would make the element be counted by the counter property while hiding it.
.hide {
font-size: 0px;
}
<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
<li class="hide">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>
<li class="hide">three.three</li>
<li>three.four</li>
</ol>
</li>
<li>four</li>
</ol>
Source: CSS counter on hidden submenu
is it possible to have my ordered list in the following format?
heading
1.1. text...
1.2. text
1.2.1 text
Another heading
1.3. text
1.3.1. text
1.3.2. text
1.4. text
Is that possible?
Thank you
ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }
<ol>
<li> Cat</li>
<li>Bat</li>
<li>Mat
<ol>
<li>Red Mat</li>
<li>Green Mat</li>
</ol>
</li>
<li>Pat</li>
</ol>
.contract ol {
counter-reset: item
}
.contract li.paragraph {
counter-increment: item;
}
.contract li li.paragraph:before {
content: counters(item, ".")" ";
}
.contract li {
list-style-type: none;
}
.contract ol {
padding-left: 0;
}
<section class="contract">
<ol>
<li class="paragraph">
<ol>
<li>
<h2>Heading</h2>
</li>
<li class="paragraph">text</li>
<li class="paragraph">text
<ol>
<li class="paragraph">text</li>
</ol>
</li>
<li>
<h2>Another heading</h2>
</li>
<li class="paragraph">text
<ol>
<li class="paragraph">text</li>
<li class="paragraph">text</li>
</ol>
</li>
<li class="paragraph">text</li>
</ol>
</li>
</ol>
</section>