I want to create a ordered list that looks like
1.0
1.1
1.11
Currently I get
1
1.1
1.1.0.11
/* First, set all numbered lists to use counter-reset */
OL { counter-reset: item }
/* Display all list items in a numbered list in block display */
LI { display: block }
/* Use a counter that checks the number of items and adds a "." between them and ends with ". " */
LI:before { content: counters(item, ".") " "; counter-increment: item }
/* */
ol ol ol {counter-reset: item 10; }
ol ol ol:nth-child(1) {counter-reset: item 10;}
<ol>
<li>Test Level 1</li>
<ol>
<li>Test Level 2</li>
<ol>
<li>Test Level 3</li>
<li>Test Level 4</li>
<li> </li>
</ol>
</ol>
</ol>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I am using ol>li in an HTML file, added styling to it to use the hierarchical numbering like 1, 1.1,1.2, 1.2.1 etc. It works perfectly fine sometimes, but sometimes the numbering gets messy. Instead of starting with next number, it continues the same hierarchy. Refer the attached image, instead of using number 3, the numbering continues as 2.6 and then uses 2.6.1 and so on
here is my css -
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0
}
ol>li {
display: table;
counter-increment: item;
margin-bottom: .6em
}
ol>li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: .3em;
font-size: 14px;
}
li ol>li {
margin: 0
}
li ol>li:before {
content: counters(item, ".") " "
}
li ol>li:before {
content: counters(item, ".") " ";
font-size: small
}
<ol>
<li>List Item 1
<ol>
<li>Indented List Item 1</li>
<li>Indented List Item 2</li>
<li>Indented List Item 3</li>
</ol>
</li>
<li>List Item 2
<ol>
<li>Indented List Item 1</li>
<li>Indented List Item 2</li>
<li>Indented List Item 3</li>
</ol>
</li>
<li>List Item 3
<ol>
<li>Indented List Item 1</li>
<li>Indented List Item 2</li>
<li>Indented List Item 3</li>
</ol>
</li>
<li>List Item 4
<ol>
<li>Indented List Item 1</li>
<li>Indented List Item 2</li>
<li>Indented List Item 3</li>
</ol>
</li>
</ol>
Here is clean code
ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }
<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</li>
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</ol>
</li>
<li>
four
<ol>
<li>Four.one</li>
<li>Four.two</li>
</ol>
</li>
</ol>
How to increment ordered list with numbers and alphabet letters in CSS:
ol.nested {
margin-bottom: 0;
counter-reset: item;
}
ol.nested li {
display: block;
position: relative;
}
ol.nested li:before {
content: counters(item, ".", decimal) ".";
counter-increment: item;
position: absolute;
margin-right:100%;
right: 10px;
}
<ol class="nested">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ol class="nested">
<li>Show Item 3.a instead of 3.1</li>
<li>Show Item 3.b instead of 3.2</li>
<li>Show Item 3.c instead of 3.3</li>
</ol>
</li>
<li>Item 4
<ol class="nested">
<li>Show Item 4.a instead of 4.1</li>
<li>Show Item 4.b instead of 4.2</li>
<li>Show Item 4.c instead of 4.3</li>
</ol>
</li>
<li>Item 5</li>
</ol>
Is there a way to combine numbers with letters (2.a, 2.b, 2.c) and increment them in ordered list? With content and counters-increment the list will be incremented only with one type either decimal or lower-alpha. How to combine decimal with lower-alpha incrementing? Thank you!
you can use multiple counters with multiple counter-reset, and apply a counter-increment to ::before and ::after
.nested {
margin-bottom: 0;
counter-reset: number letter; /* default reset for number and letter */
}
.nested.third li {
counter-reset: number 2; /* reset all child li in order to keep 3.x */
}
.nested.fourth {
counter-reset: letter /* reset the letter to restart at A */
}
.nested.fourth li {
counter-reset: number 3; /* reset all child li in order to keep 4.x */
}
.nested li {
display: block;
position: relative;
}
.parent li::before {
content: counter(number)".";
counter-increment: number; /* increment the numbers in general */
position: absolute;
margin-right: 100%;
right: 20px;
background: lightgreen
}
.child li::after {
content: counter(letter, lower-alpha); /* increment the letters in general */
counter-increment: letter;
position: absolute;
margin-right: 100%;
right: 10px;
background: lightblue;
width: 10px
}
<ol class="nested parent">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ol class="nested child third">
<li>Show Item 3.a instead of 3.1</li>
<li>Show Item 3.b instead of 3.2</li>
<li>Show Item 3.c instead of 3.3</li>
</ol>
</li>
<li>Item 4
<ol class="nested child fourth">
<li>Show Item 4.a instead of 4.1</li>
<li>Show Item 4.b instead of 4.2</li>
<li>Show Item 4.c instead of 4.3</li>
</ol>
</li>
<li>Item 5</li>
</ol>
OP's comment
Sorry, you're right. The numbers are exactly as I asked. Is there no way to have generic css class for the next items 5, 6, 7 and
so on? Hm.
As #Mr Lister answered below you can do it, so I'm updating my answer to meet your specs.
As you can see by the colors, the difference from one snippet to another is that in the first one you have more control over each item, in this one is more general.
.nested li {
display: block;
position: relative;
}
.nested {
margin-bottom: 0;
counter-reset: number;
}
.parent .nested {
counter-reset: letter;
}
.parent .nested li::before {
content: counter(number) "." counter(letter, lower-alpha);
counter-increment: letter;
background: lightblue
}
.nested li::before {
content: counter(number) ".";
counter-increment: number;
position: absolute;
margin-right: 100%;
right: 10px;
background: lightgreen
}
<ol class="nested parent">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ol class="nested">
<li>Show Item 3.a instead of 3.1</li>
<li>Show Item 3.b instead of 3.2</li>
<li>Show Item 3.c instead of 3.3</li>
</ol>
</li>
<li>Item 4
<ol class="nested">
<li>Show Item 4.a instead of 4.1</li>
<li>Show Item 4.b instead of 4.2</li>
<li>Show Item 4.c instead of 4.3</li>
</ol>
</li>
<li>Item 5</li>
</ol>
Is this what you need? It doesn't rely on any specific class names for the different nested lists, so you can have as many lists as you want.
The trick is to use items for the outer list and subitems for the inner ones.
ol.nested {
margin-bottom: 0;
counter-reset: item;
}
ol.nested li {
display: block;
position: relative;
}
ol.nested li:before {
content: counters(item, ".", decimal) ".";
counter-increment: item;
position: absolute;
margin-right: 100%;
right: 10px;
}
.nested .nested {
counter-reset: subitem;
}
.nested .nested li:before {
content: counter(item) "." counter(subitem, lower-alpha);
counter-increment: subitem;
}
<ol class="nested">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ol class="nested">
<li>Show Item 3.a instead of 3.1</li>
<li>Show Item 3.b instead of 3.2</li>
<li>Show Item 3.c instead of 3.3</li>
</ol>
</li>
<li>Item 4
<ol class="nested">
<li>Show Item 4.a instead of 4.1</li>
<li>Show Item 4.b instead of 4.2</li>
<li>Show Item 4.c instead of 4.3</li>
</ol>
</li>
<li>Item 5</li>
</ol>
Background
The Tinymce editor supports nested numbered lists. Naturally something like this is possible with the editor,
Now the requirement is to show numbers like this,
So far
This is doable by modifying the stylesheet associated with the editor with following list styles (from this answer)
ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }
Question
Now the issue is if I select some other number format (for example lower Greek from the editor it looks like following)
how do I get the nested lists also to use the same format as the parent list?
This is the solution for the problem,
ol {
counter-reset: item
}
ol li {
display: block
}
ol li:before {
content: counters(item, ".") ". ";
counter-increment: item
}
ol[style*="list-style-type: lower-alpha;"] li:before {
content: counters(item, ".", lower-alpha) ". ";
counter-increment: item
}
<ol>
<li>Level 1</li>
<li>Level 1
<ol>
<li>Level 2</li>
<li>Level 2</li>
<li>Level 2
<ol>
<li>Level 3</li>
<li>Level 3</li>
<li>Level 3
<ol>
<li>Level 4</li>
<li>Level 4</li>
<li>Level 4</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
<li>Level 1</li>
<li>Level 1</li>
</ol>
I use Nested counter to create a html ordered list.
This is my code:
http://jsfiddle.net/Katalhama/YpgfF/
I expect this output
0. zero
0.1 zero.one
1. one
1.1. one.one
1.2. one.two
1.3. one.three
2. two
2.1 two.one
2.2 two.two
2.2.1 two.two.one
2.2.2 two.two.two
3. three
But instead I got this:
0. zero
0.0 zero.one
1. one
1.0 one.one
1.1 one.two
1.2 one.three
2. two
2.0 two.one
2.1 two.two
2.1.0 two.two.one
2.2.1 two.two.two
3. three
I want to start with a 0 index, but i wanna sublists index start at 1. My only thought is using two counters, but i'm not familiar with advanced CSS yet and i don't know howw to manage them :(
Thanks all!
There are 2 problems in your code. The first is very serious. The HTML code is in fact invalid. The ol can only contains li elements as direct children. But you added ol elements as direct children of ol. You have to wrap the ol elements inside the li elements. The second problem is the problem you asked for. To achieve what you want, we can set the counter-reset differently for the outermost ol and others ol:
HTML:
<ol id='list'>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
</li>
<li>three</li>
<li>four
<ol>
<li>four.one</li>
<li>four.two
<ol>
<li>four.two.one</li>
<li>four.two.two</li>
</ol>
</li>
</ol>
</li>
<li>five</li>
</ol>
CSS:
#list {
counter-reset: item -1;
}
ol {
counter-reset: item;
padding-left: 10px;
}
LI { display: block }
LI:before {
content: counters(item, ".") " ";
counter-increment: item;
}
Demo 1
Without using an id for the outermost ol, you can do something like this:
ol {
counter-reset: item -1;
}
ol ol {
counter-reset: item;
padding-left: 10px;
}
LI { display: block }
LI:before {
content: counters(item, ".") " ";
counter-increment: item;
}
Demo 2
Here is another approach:
ol {
counter-reset: item -1;
}
LI { display: block }
LI:before {
content: counters(item, ".") " ";
counter-increment: item;
}
ol ol li:first-child:before {
counter-increment: item 2;
}
Demo 3
To get the correct numbers for the example on JS Fiddle, change the counter-reset to item 0;
CSS
OL {
counter-reset: item 0;
padding-left: 10p;
}
LI {
display: block
}
LI:before {
content: counters(item, ".") " ";
counter-increment: item;
}
And your OL's need to be inside your LIs, you can't have an OL inside an OL
HTML:
<body>
<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>
</body>
No no your HTML (in the fiddle) is broken. As you mentioned in the title your <ol>'s should be nested, so that means inside other li's, like this
<ol>
<li>Two
<ol>
<li>Two.one</li>
</ol>
</li>
</ol>
At the moment your ol's are direct children of your other ol's. Ol's may only have li's as children (or script tags). So at the moment you have this.
<ol>
<li>Two</li>
<ol>
<li>Two.one</li>
</ol>
</ol>
When you've changed it to the first codeblock in this answer, you can apply different CSS for nested li's, like this:
ol { counter-reset: item -1 }
ol li ol { counter-reset: item 0 }
Demo here: http://jsfiddle.net/kevinvanlierde/YpgfF/1/
By editing Tyblitz HTML structure..which was not showing proper result.
<body>
<ol>
<li>zero</li>
<li>one
<ol>
<li>one.one</li>
<li>one.two</li>
<li>one.three</li>
</ol>
</li>
<li>two
<ol>
<li>two.one</li>
<li>two.two
<ol>
<li>two.two.one</li>
<li>two.two.two</li>
</ol>
</li>
</ol>
</li>
<li>three</li>
</ol>
</body>
CSS
OL { counter-reset: item -1; padding-left: 10px; }
ol li ol { counter-reset: item 0; }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }
JSFiddel
I need to indent an ordered list to keep the parent list items numbering:
What I have:
// My code:
<ol>
<li>Item 1</li>
<li>
Item 2
<ol>
<li>Item 2.1</li>
<li>Item 2.2</li>
</ol>
</li>
<li>Item 3</li>
</ol>
And so forth.
What i'm getting as a result now is:
// Result:
1. Item 1
2. Item 2
Item 1
Item 2
3. Item 3
What i'm looking for is:
// Looking for:
1. Item 1
2. Item 2
2.1 Item 2.1
2.2. Item 2.2
3. Item 3
Any ideas?
You can use counters to do so:
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }
Inspired by DON's answer, I played around with the counters property and managed to get the following working:
ol {
counter-reset: item;
list-style-type: none;
}
ol li:before {
font-weight: bold;
content: counters(item,".")". ";
counter-increment: item;
}
ol ol {
counter-reset: subitem;
list-style-type: none;
}
li li:before {
content: counters(item,".")"."counters(subitem,".")". ";
counter-increment: subitem;
}
I'm not convinced that this is the most clean cut solution because I don't know the content element that well but this will definately give you an ordered list which incremints sub level list items according to their parent containers last list item.