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;
Related
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
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 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>
NOTE:
Due to some of the answers/comments left below (with which I agree), I feel this question is too vague, and does not explain sufficiently my problem. I was too hurried when I put it together, and this has caused the incorrect answers, for which I accept the fault. Due to the current answers and comments, I feel that even if I edited this question again, that future viewers would be confused by the answers/comments on the page, unless everyone were to update them as well. Because of this, i have created another question that completely clarifies my problem. Again, I apologize for the confusion I caused on this question.
The clarified question can be found here: Style an Ordered List like “X.X” based on list start attribute
I am working on updating a client website that contains a policy page. Within the policy are nine different sections, each with their own content. Inside each section are different section statements, which should have the numbering system of "x.x". However, this does not exist in basic HTML. In addition, some sections have various different forms of ordered lists inside themselves.
I have determined that I do not want to tackle this problem in a nested way, that is to say like this:
<ol>
<li>Section 1
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</li>
</ol>
This is the way that every other answer I have looked at treats the problem. Rather, I wish to tackle it like this (code for below sample). I want a list that simply displays "x.1, x.2, x.3," where 'x' is dependent on the start number of that particular list.
<h2>Section 1</h2>
<strong>Heading 1</strong>
<ol class="specialList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<strong>Heading 2</strong
<ol type="lower-roman">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h2>Section 2</h2>
<ol class="specialList">
<li>
<ol type="upper-alpha">
<li>First subitem</li>
<li>Second subitem</li>
</ol>
</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h2>Section 3</h2>
<ol class="specialList">
<li>First item
<ol type="circle">
<li>First subitem</li>
<li>Second subitem</li>
</ol>
</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<h2>Section 4</h2>
<ol class="specialList">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Section 1
Heading
1.1 First item
1.2 Second item
1.3 Third item
Heading 2
i. First item
ii. Second item
iii. Third item
Section 2
2.1 First item
A. First subitem
B. Second subitem
2.2 Second item
2.3 Third item
Section 3
3.1 First item
• First subitem
• Second subitem
3.2 Second item
3.3 Third item
Section 4
4.1 First item
4.2 Second item
4.3 Third item
This way, I can avoid using a nested ordered list, and hopefully simplify the matter, especially the necessary CSS. It will mean hardcoding some start value attributes in to each ordered list, but the policy sections will not change frequently, so this should not matter.
I do not wish to use JavaScript, as the client wants it to look this way regardless of the user's setup. The pages are JSP pages, so if there is a way to set it up to dynamically generate, that would be acceptable.
I have already looked at these links below. While they are excellent questions, none of them answer my specific question. The first deals with nested ordered lists, while I am dealing with a single ordered list. The second one has the right idea, but is still a bit different (has "x.x.x", while I only want "x.x").
Can Ordered List Produce Results that looks like 1.1?
Achieve sub numbering on ordered list
Please let me know if I need to clarify anything! Thanks!
Summary
In conclusion, the client wants a list that will start at "x.1" and go as far as necessary, where "x" is a given start value attribute for the specific list. I just clarified this matter with them, which is the reason for this "update" of requirements. Basically, I need a class that changes the numbering system of the top level of a list to the "x.x" format (again, where the first "x" is the starting value"). Any sublists (nested lists) will not follow this format, but will follow another format as specified by the "type" or "list-style" attribute.
Took a while to figure this one out!
here is my fiddle
h2.title {
font-size: 20px;
font-weight: 800;
margin-left: -20px;
padding: 12px;
counter-increment: ordem;
}
li.heading {
font-size: 16px;
font-weight: bold;
padding: 12px;
list-style-type: none;
}
.bullet {
counter-reset: bullet;
padding-left: 12px;
}
.bullet li {
list-style-type: none;
}
.bullet li:before {
counter-increment: bullet;
content: counter(ordem)"." counter(bullet)" ";
}
ol.none {
list-style: none!important
}
li.s2sub::before {
counter-increment: none!important;
content: none!important;
}
li.s2sub {
list-style: upper-alpha;
}
li.s3sub::before {
counter-increment: none!important;
content: none!important;
}
li.s3sub {
list-style-type: circle;
}
li.roman::before {
counter-increment: none!important;
content: none!important;
}
li.roman {
list-style: lower-roman inside;
}
<body>
<ol>
<h2 class="title">Section 1</h2>
<li class="heading">Heading 1</li>
<ol class="bullet">
<li>text 1 one</li>
<li>text 1 two</li>
<li>text 1 three</li>
<li>text 1 four</li>
</ol>
<li class="heading">Heading 2</li>
<ol class="bullet">
<li class="roman">Item 1</li>
<li class="roman">Item 2</li>
<li class="roman">Item 3</li>
</ol>
<h2 class="title">Section 2</h2>
<ol class="bullet">
<li>First item
<ol>
<li class="s2sub">First subitem</li>
<li class="s2sub">Second subitem</li>
</ol>
</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h2 class="title">Section 3</h2>
<ol class="bullet">
<li>First item
<ol>
<li class="s3sub">First subitem</li>
<li class="s3sub">Second subitem</li>
</ol>
</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</ol>
</body>
I got it to work like so:
body{
counter-reset: section children;
}
li{
list-style:none;
}
.parent::before {
counter-increment: section;
content: counter(section) " - ";
}
.parent li:first-child{
counter-reset:children;
}
.parent li::before{
counter-increment: children;
content: counter(section) "." counter(children) " - ";
}
<ol>
<li class="parent">Section 1
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</li>
<li class="parent">Section 2
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</li>
</ol>
I removed the list style, since it isn't necessary.
What this does is create two separate counters for the children and the sections, then resets the children counter on every new section.
JSFiddle Demo
I want to create two ordered (independent of each other) HTML lists that have the following formats and start at the numbers, as presented here:
2.1
2.2
2.3
2.4
2.1.1
2.1.2
2.2.1
2.2.2
2.2.3
2.3.1
2.3.2
2.4.1
2.4.2
How do I do this with CSS?
Any help would be appreciated as I have exhausted resources here in trying to figure this out.
Thanks!
Try this
ol {
counter-reset: firststlevel;
list-style-type: none;
}
li:before {
display: inline-block;
content: counter(firststlevel);
counter-increment: firststlevel;
width: 2em;
margin-left: -2em;
}
ol ol {
counter-reset: secondlevel;
}
ol ol li:before{
content:counter(firststlevel) "."counter(secondlevel);
counter-increment: secondlevel;
}
ol ol ol {
counter-reset: thirdlevel;
}
ol ol ol li:before{
content:counter(firststlevel) "."counter(secondlevel)"."counter(thirdlevel);
counter-increment: thirdlevel;
text-indent:-5px;
}
<ol>
<li>Main 1</li>
<ol>
<li>Child 1 of Main 1
<ol>
<li>Sub Child 1 of Child 1 of Main 1</li>
<li>Sub Child 1 of Child 1 of Main 1</li>
</ol>
</li>
<li>Child 2 of Main 1
<ol>
<li>Sub Child 1 of Child 2 of Main 1</li>
<li>Sub Child 2 of Child 2 of Main 1</li>
</ol>
</li>
</ol>
<li>Main 2</li>
<ol>
<li>Child 1 of Main 2
<ol>
<li>Sub Child 1 of Child 1 of Main 2</li>
<li>Sub Child 2 of Child 1 of Main 2</li>
</ol>
</li>
<li>Child 2 of Main 2
<ol>
<li>Sub Child 1 of Child 2 of Main 2</li>
<li>Sub Child 2 of Child 2 of Main 2</li>
<li>Sub Child 3 of Child 2 of Main 2</li>
</ol>
</li>
</ol>
</ol>