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
Related
I need to put some legal text on our website (Terms & Conditions), and the legal guys have made it so that there are 2 levels of incrementation. Not a huge problem, I have found some CSS that does the trick well.
However, the issue is that the 3rd level of incrementation is not 1.1.1 but a, so a different type. And I cannot find a way to achieve that using CSS.
An extra complication is that in yet another paragraph, they use yet another type for the third level: i, ii, iii.
The code I use is below. Any idead on how to achieve this?
<!DOCTYPE html>
<html>
<head>
<style>
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol > li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
ol > li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 0.6em;
}
li ol > li {
margin: 0;
}
li ol > li:before {
content: counters(item, ".") " ";
}
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item
<ol>
<li>this needs to be a</li>
<li>this needs to be b</li>
<li>this needs to be c</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
</body>
</html>
OK, I figured it out, thanks to the pointer about the classes from Mr Lister.
The trick was two-fold:
Add specific selector to the CSS to only select the 3rd level of the list
Add 2 classes, one for the lower-alpha and one for lower-roman
Full code below.
<!DOCTYPE html>
<html>
<head>
<style>
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol > li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
ol > li:before {
content: counters(item, ".") ".";
display: table-cell;
padding-right: 0.6em;
}
li ol > li {
margin: 0;
}
li ol > li {
margin: 0;
}
li ol > li:before {
content: counters(item, ".") " ";
}
li ol li ol.alpha> li:before {
content: counter(item, lower-alpha)".";
}
li ol li ol.roman> li:before {
content: counter(item, lower-roman)".";
}
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item
<ol>
<li>item
<ol class="alpha">
<li>this needs to be a</li>
<li>this needs to be b</li>
<li>this needs to be c</li>
</ol>
</li>
<li>item</li>
<li>item
<ol class = "roman">
<li>this needs to be i</li>
<li>this needs to be ii</li>
<li>this needs to be iii</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
</body>
</html>
Thanks for putting me in the right direction!
I have problem to remove indent on the elements 2.1 , 2.2 , 2.3 etc... probably the third numbering level indent will be moved to left after solving that problem.
My 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
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</li>
</ol>
</li>
<li>four</li>
</ol>
I tried a lot of ways, but nothing is not correct. Someone do have idea , how to solve that, please?
Add these styles
ol ol {
padding: 0;
}
ol ol ol {
padding: 20px;
}
ol {
counter-reset: item
}
ol ol {
padding: 0;
}
ol ol ol {
padding: 20px;
}
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
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</li>
</ol>
</li>
<li>four</li>
</ol>
Assuming you can't change the markup, you could apply your styles to the list's parent element and target the second numbering level using the child combinator (>):
.list-parent > ol > li > ol {
padding-left: 0;
}
.list-parent ol {
counter-reset: item
}
.list-parent li {
display: block
}
.list-parent li:before {
content: counters(item, ".") " ";
counter-increment: item
}
<div class="list-parent">
<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>
This would be the best approach concerning maintainability as well, as applying global styles to every <ol> list on your website would only result in unwanted behavior sooner or later.
Here is an easy solution:
(See the comments in the code)
ol {
counter-reset: item;
padding-left: 0; /* Remove the padding of all ol elements */
}
ol ol ol {
padding-left: 1em; /* Set the padding of third level ol elements */
}
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
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</li>
</ol>
</li>
<li>four</li>
</ol>
Hope it helps.
I use nested counters and scope to create an ordered list:
ol {
counter-reset: item;
padding-left: 10px;
}
li {
display: block
}
li:before {
content: counters(item, ".") " ";
counter-increment: item
}
<ol>
<li>one</li>
<li>two</li>
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
<li>three</li>
<ol>
<li>three.one</li>
<li>three.two</li>
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</ol>
<li>four</li>
</ol>
I expect the following outcome:
1. one
2. two
2.1. two.one
2.2. two.two
2.3. two.three
3. three
3.1 three.one
3.2 three.two
3.2.1 three.two.one
3.2.2 three.two.two
4. four
Instead, this is what I see (wrong numbering):
1. one
2. two
2.1. two.one
2.2. two.two
2.3. two.three
2.4 three <!-- this is where it goes wrong, when going back to the parent -->
2.1 three.one
2.2 three.two
2.2.1 three.two.one
2.2.2 three.two.two
2.3 four
I have no clue, does anyone see where it goes wrong?
Here is a JSFiddle: http://jsfiddle.net/qGCUk/2/
Uncheck "normalize CSS" - http://jsfiddle.net/qGCUk/3/
The CSS reset used in that defaults all list margins and paddings to 0
UPDATE http://jsfiddle.net/qGCUk/4/ - you have to include your sub-lists in your main <li>
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
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</li>
</ol>
</li>
<li>four</li>
</ol>
Use this style to change only the nested lists:
ol {
counter-reset: item;
}
ol > li {
counter-increment: item;
}
ol ol > li {
display: block;
}
ol ol > li:before {
content: counters(item, ".") ". ";
margin-left: -20px;
}
Check this out :
http://jsfiddle.net/PTbGc/
Your issue seems to have been fixed.
What shows up for me (under Chrome and Mac OS X)
1. one
2. two
2.1. two.one
2.2. two.two
2.3. two.three
3. three
3.1 three.one
3.2 three.two
3.2.1 three.two.one
3.2.2 three.two.two
4. four
How I did it
Instead of :
<li>Item 1</li>
<li>Item 2</li>
<ol>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ol>
Do :
<li>Item 1</li>
<li>Item 2
<ol>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ol>
</li>
This is a great solution! With a few additional CSS rules you can format it just like an MS Word outline list with a hanging first line indent:
OL {
counter-reset: item;
}
LI {
display: block;
}
LI:before {
content: counters(item, ".") ".";
counter-increment: item;
padding-right:10px;
margin-left:-20px;
}
Keep it Simple!
This is a Simpler and Standard solution to increment the number and to retain the dot at the end.
Even if you get the CSS right, it will not work if your HTML is not correct. see below.
CSS
ol {
counter-reset: item;
}
ol li {
display: block;
}
ol li:before {
content: counters(item, ". ") ". ";
counter-increment: item;
}
SASS
ol {
counter-reset: item;
li {
display: block;
&:before {
content: counters(item, ". ") ". ";
counter-increment: item
}
}
}
HTML Parent Child
If you add the child make sure it is under the parent li.
Will not work ✘
Notice the parent li and the child ol li are individual here, this will not work.
<ol>
<li>Parent 1</li> <!-- Parent has open and close li tags -->
<ol>
<li>Child</li>
</ol>
<li>Parent 2</li>
</ol>
Will work ✔
You need to place the ol li child element inside parent li. Notice the parent li is hugging the child.
<ol>
<li>Parent 1 <!-- Parent open li tag -->
<ol>
<li>Child</li>
</ol>
</li> <!-- Parent close li tag -->
<li>Parent 2</li>
</ol>
After going through other answers I came up with this, just apply class nested-counter-list to root ol tag:
sass code:
ol.nested-counter-list {
counter-reset: item;
li {
display: block;
&::before {
content: counters(item, ".") ". ";
counter-increment: item;
font-weight: bold;
}
}
ol {
counter-reset: item;
& > li {
display: block;
&::before {
content: counters(item, ".") " ";
counter-increment: item;
font-weight: bold;
}
}
}
}
css code:
ol.nested-counter-list {
counter-reset: item;
}
ol.nested-counter-list li {
display: block;
}
ol.nested-counter-list li::before {
content: counters(item, ".") ". ";
counter-increment: item;
font-weight: bold;
}
ol.nested-counter-list ol {
counter-reset: item;
}
ol.nested-counter-list ol > li {
display: block;
}
ol.nested-counter-list ol > li::before {
content: counters(item, ".") " ";
counter-increment: item;
font-weight: bold;
}
ol.nested-counter-list {
counter-reset: item;
}
ol.nested-counter-list li {
display: block;
}
ol.nested-counter-list li::before {
content: counters(item, ".") ". ";
counter-increment: item;
font-weight: bold;
}
ol.nested-counter-list ol {
counter-reset: item;
}
ol.nested-counter-list ol>li {
display: block;
}
ol.nested-counter-list ol>li::before {
content: counters(item, ".") " ";
counter-increment: item;
font-weight: bold;
}
<ol class="nested-counter-list">
<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>
And if you need trailing . at the end of the nested list's counters use this:
ol.nested-counter-list {
counter-reset: item;
}
ol.nested-counter-list li {
display: block;
}
ol.nested-counter-list li::before {
content: counters(item, ".") ". ";
counter-increment: item;
font-weight: bold;
}
ol.nested-counter-list ol {
counter-reset: item;
}
<ol class="nested-counter-list">
<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>
I think that these answers are over-complicating this. If you don't need to support Internet Explorer, then the solution is a one-liner:
ol > li::marker { content: counters(list-item, '.') '. '; }
<ol>
<li>one</li>
<li>two</li>
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
<li>three</li>
<ol>
<li>three.one</li>
<li>three.two</li>
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</ol>
<li>four</li>
</ol>
See the ::marker CSS pseudo-element page and the Using CSS counters page on MDN's CSS reference website for more information.
I encountered similar problem recently. The fix is to set the display property of the li items in the ordered list to list-item, and not display block, and ensure that the display property of ol is not list-item. i.e
li { display: list-item;}
With this, the html parser sees all li as the list item and assign the appropriate value to it, and sees the ol, as an inline-block or block element based on your settings, and doesn't try to assign any count value to it.
Moshe's solution is great but the problem may still exist if you need to put the list inside a div. (read: CSS counter-reset on nested list)
This style could prevent that issue:
ol > li {
counter-increment: item;
}
ol > li:first-child {
counter-reset: item;
}
ol ol > li {
display: block;
}
ol ol > li:before {
content: counters(item, ".") ". ";
margin-left: -20px;
}
<ol>
<li>list not nested in div</li>
</ol>
<hr>
<div>
<ol>
<li>nested in div</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>
You can also set the counter-reset on li:before.
Thank you everyone above for their answers!
As I needed RTL solution, I found out that this can solve it:
ol.nested-counter-list li {
display: block;
unicode-bidi: bidi-override;
}
So you would use any of the solution above, but also update the specific CSS selector for RTL cases.
Can an ordered list produce results that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with CSS? So far, using list-style-type:decimal has produced only 1, 2, 3, not 1.1, 1.2., 1.3.
You can use counters to do so:
The following style sheet numbers nested list items as "1", "1.1", "1.1.1", etc.
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }
Example
ol { counter-reset: item }
li{ display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }
<ol>
<li>li element
<ol>
<li>sub li element</li>
<li>sub li element</li>
<li>sub li element</li>
</ol>
</li>
<li>li element</li>
<li>li element
<ol>
<li>sub li element</li>
<li>sub li element</li>
<li>sub li element</li>
</ol>
</li>
</ol>
See Nested counters and scope for more information.
None of solutions on this page works correctly and universally for all levels and long (wrapped) paragraphs. It’s really tricky to achieve a consistent indentation due to variable size of marker (1., 1.2, 1.10, 1.10.5, …); it can’t be just “faked,” not even with a precomputed margin/padding for each possible indentation level.
I finally figured out a solution that actually works and doesn’t need any JavaScript.
It’s tested on Firefox 32, Chromium 37, IE 9 and Android Browser. Doesn't work on IE 7 and previous.
CSS:
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol > li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
ol > li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 0.6em;
}
li ol > li {
margin: 0;
}
li ol > li:before {
content: counters(item, ".") " ";
}
Example:
Try it on JSFiddle, fork it on Gist.
The chosen answer is a great start, but it essentially forces list-style-position: inside; styling on the list items, making wrapped text hard to read. Here's a simple workaround that also gives control over the margin between the number and text, and right-aligns the number as per the default behaviour.
ol {
counter-reset: item;
}
ol li {
display: block;
position: relative;
}
ol li:before {
content: counters(item, ".")".";
counter-increment: item;
position: absolute;
margin-right: 100%;
right: 10px; /* space between number and text */
}
JSFiddle: http://jsfiddle.net/3J4Bu/
The solutions posted here did not work well for me, so I did a mixture of the ones of this question and the following question: Is it possible to create multi-level ordered list in HTML?
/* Numbered lists like 1, 1.1, 2.2.1... */
ol li {display:block;} /* hide original list counter */
ol > li:first-child {counter-reset: item;} /* reset counter */
ol > li {counter-increment: item; position: relative;} /* increment counter */
ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;} /* print counter */
Result:
Note: the screenshot, if you wish to see the source code or whatever is from this post: http://estiloasertivo.blogspot.com.es/2014/08/introduccion-running-lean-y-lean.html
Note: Use CSS counters to create nested numbering in a modern browser. See the accepted answer. The following is for historical interest only.
If the browser supports content and counter,
.foo {
counter-reset: foo;
}
.foo li {
list-style-type: none;
}
.foo li::before {
counter-increment: foo;
content: "1." counter(foo) " ";
}
<ol class="foo">
<li>uno</li>
<li>dos</li>
<li>tres</li>
<li>cuatro</li>
</ol>
In the near future you may be able to use the ::marker psuedo-element to achieve the same result as other solutions in just one line of code.
Remember to check the Browser Compatibility Table as this is still an experimental technology.
At the moment of writing only Firefox and Firefox for Android, starting from version 68, support this.
Here is a snippet that will render correctly if tried in a compatible browser:
::marker { content: counters(list-item,'.') ':' }
li { padding-left: 0.5em }
<ol>
<li>li element
<ol>
<li>sub li element</li>
<li>sub li element</li>
<li>sub li element</li>
</ol>
</li>
<li>li element</li>
<li>li element
<ol>
<li>sub li element</li>
<li>sub li element</li>
<li>sub li element</li>
</ol>
</li>
</ol>
You may also want to check out this great article by smashingmagazine on the topic.
The following worked for me:
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol > li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
ol > li:before {
content: counters(item, ".") ") ";
display: table-cell;
padding-right: 0.6em;
}
li ol > li {
margin: 0;
}
li ol > li:before {
content: counters(item, ".") ") ";
}
Look at: http://jsfiddle.net/rLebz84u/2/
or this one http://jsfiddle.net/rLebz84u/3/
with more and justified text
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Sandro Alvares - KingRider">
</head>
<body>
<style type="text/css">
li.title {
font-size: 20px;
font-weight: lighter;
padding: 15px;
counter-increment: ordem;
}
.foo {
counter-reset: foo;
padding-left: 15px;
}
.foo li {
list-style-type: none;
}
.foo li:before {
counter-increment: foo;
content: counter(ordem) "." counter(foo) " ";
}
</style>
<ol>
<li class="title">TITLE ONE</li>
<ol class="foo">
<li>text 1 one</li>
<li>text 1 two</li>
<li>text 1 three</li>
<li>text 1 four</li>
</ol>
<li class="title">TITLE TWO</li>
<ol class="foo">
<li>text 2 one</li>
<li>text 2 two</li>
<li>text 2 three</li>
<li>text 2 four</li>
</ol>
<li class="title">TITLE THREE</li>
<ol class="foo">
<li>text 3 one</li>
<li>text 3 two</li>
<li>text 3 three</li>
<li>text 3 four</li>
</ol>
</ol>
</body>
</html>
Result:
http://i.stack.imgur.com/78bN8.jpg
I have some problem when there are two lists and second one is inside DIV
Second list should start at 1. not 2.1
<ol>
<li>lorem</li>
<li>lorem ipsum</li>
</ol>
<div>
<ol>
<li>lorem (should be 1.)</li>
<li>lorem ipsum ( should be 2.)</li>
</ol>
</div>
http://jsfiddle.net/3J4Bu/364/
EDIT:
I solved the problem by this
http://jsfiddle.net/hy5f6161/
this is proper code if you want to first child li resize of other css.
<style>
li.title {
font-size: 20px;
counter-increment: ordem;
color:#0080B0;
}
.my_ol_class {
counter-reset: my_ol_class;
padding-left: 30px !important;
}
.my_ol_class li {
display: block;
position: relative;
}
.my_ol_class li:before {
counter-increment: my_ol_class;
content: counter(ordem) "." counter(my_ol_class) " ";
position: absolute;
margin-right: 100%;
right: 10px; /* space between number and text */
}
li.title ol li{
font-size: 15px;
color:#5E5E5E;
}
</style>
in html file.
<ol>
<li class="title"> <p class="page-header list_title">Acceptance of Terms. </p>
<ol class="my_ol_class">
<li>
<p>
my text 1.
</p>
</li>
<li>
<p>
my text 2.
</p>
</li>
</ol>
</li>
</ol>
I was after adding numbered list to Python Markdown's TOC Extension.
I did something like this:
.toc ul { counter-reset: outItem; list-style: none }
.toc ul > li{ counter-reset: nestedItem }
.toc ul > li:before { content: counters(outItem, ".") ". "; counter-increment: outItem; margin-left: -2em; }
I am not sure it is the correct way, but it worked for me.
I needed to add this to the solution posted in 12 as I was using a list with a mixture of ordered list and unordered lists components. content: no-close-quote seems like an odd thing to add I know, but it works...
ol ul li:before {
content: no-close-quote;
counter-increment: none;
display: list-item;
margin-right: 100%;
position: absolute;
right: 10px;
}
I want to create HTML nested lists that has the following format:
1
1.1
1.2
1.3
1.4
2
2.1
I tried a solution that I found on the internet:
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }
But it didnt work for me.
Any help please??
If the counter solution is too complicated, is there a way to fake the nested list effect, by writing them manually but being sure that the formatting looks like a real list
EDIT
need full IE6 support
this answer is for the first question. I suggest use this method if you are not going below IE8 (IE7 => ?). for below IE7 you can use same logic with jquery.
Original Post from
http://www.w3schools.com/cssref/pr_gen_counter-reset.asp
CSS
ul.numeric-decimals { counter-reset:section; list-style-type:none; }
ul.numeric-decimals li { list-style-type:none; }
ul.numeric-decimals li ul { counter-reset:subsection; }
ul.numeric-decimals li:before{
counter-increment:section;
content:counter(section) ". ";/*content:"Section " counter(section) ". ";*/
}
ul.numeric-decimals li ul li:before {
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}
HTML
<ul class="numeric-decimals">
<li>Cats</li>
<li>Dogs
<ul>
<li>Birds</li>
<li>Rats</li>
</ul>
</li>
<li>Rabbits</li>
<li>Ants
<ul>
<li>Lions</li>
<li>Rats</li>
</ul>
</li>
<li>Ducks</li>
This should work. It is a bad way to do this but if you MUST support IE6 not much choice.
<ol>
<li><span>1</span> Item
<ol>
<li><span>1.1</span> Item</li>
<li><span>1.2</span> Item</li>
<li><span>1.3</span> Item</li>
<li><span>1.4</span> Item</li>
</ol>
</li>
<li><span>2</span> Item
<ol>
<li><span>2.1</span> Item</li>
</ol>
</li>
</ol>
with css
ol {list-style:none;}
After your comment I've redone it a bit.
<ol>
<li><span>1</span> Item
<ol>
<li><span>1.1</span> <p>ItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem</p></li>
<li><span>1.2</span> <p>ItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem</p></li>
<li><span>1.3</span> <p>ItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem</p></li>
<li><span>1.4</span> <p>Item</p></li>
</ol>
</li>
<li><span>2</span> Item
<ol>
<li><span>2.1</span> Item</li>
</ol>
</li>
</ol>
And the css would be
ol {list-style:none;}
ol li span
{
display: block;
float: left;
width: 30px;
}
ol li
{
clear:both;
width: 400px;
}
ol li p
{
float: left;
width: 370px;
margin: 0;
}
You may have to adjust the widths.
You can use counters to do so:
Example
ol { counter-reset: item }
li{ display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }
<ol>
<li>li element
<ol>
<li>sub li element</li>
<li>sub li element</li>
<li>sub li element</li>
</ol>
</li>
<li>li element</li>
<li>li element
<ol>
<li>sub li element</li>
<li>sub li element</li>
<li>sub li element</li>
</ol>
</li>
</ol>
The before element doesn't work in IE6, but it's the correct way of doing it. I'd recommend using IE7.js, a javascript library that makes IE6 behave like IE7 where javascript and CSS are concerned. Another way could be using a javascript hack that runs only if the browser is IE6 and traverses de DOM modifying the list items...
In For A Beautiful Web you can find more information regarding IE6-compatible websites.
Works perfectly for me, in FF 3.6.6, so:
Which browser is it not working in?
What does your markup look like (i.e. are you nesting the lists correctly)?
This example uses IE6-specific CSS attribute behavior to add a static marker before each li. There must be some MS specific magic that can replace a static dash with a counter.
If you want it to be a CSS solution, use this as a starting point and then google "MSDN".
ul.example { margin: 0.5em 0; padding: 0 0 0 2em; }
ul.example li
{
margin: 0.5em 0; padding: 0 0 0 20px;
list-style-type: none;
behavior: expression( !this.before
? this.before = this.innerHTML = '— ' + this.innerHTML : '' );
text-indent: -1.24em;
}
ul.example li:before { content: '\2014\a0'; }