HTML
<ol>
<li>item1
<ol>
<li>item2</li>
</ol>
</li>
<li>item1
<ol>
<li>item2</li>
<li>item3</li>
</ol>
</li>
</ol>
SCSS
ol {
counter-reset: item;
li {
display: block
}
li:before {
content: counters(item, ".") ". ";
counter-increment: item
}
}
Now the list is ordered like this:
- item1
1.1. item2
- item1
2.1. item2
2.2. item3
Is there any way how I can increment ordering by one level at the beggining of the list? Second <ol>
would start with 2
: 2.1. item1
1.1. item1
1.1.1. item2
1.2. item1
1.2.1. item2
1.2.2. item3
-------second ol in the same parent---------
2.1. item1
2.1.1. item2
2.2. item1
2.2.1. item2
2.2.2. item3
Pen is here: http://codepen.io/simPod/pen/wawOLd
You could set up an additional counter and only update it on the outer lists (which can be selected via body > ol
)
body {
counter-reset: outer;
}
body > ol {
counter-increment: outer;
}
ol {
counter-reset: item;
}
ol li {
display: block;
}
ol > li:before {
content: counter(outer)"." counters(item, ".")". ";
counter-increment: item;
}
<ol>
<li>item1
<ol>
<li>item2</li>
</ol>
</li>
<li>item1
<ol>
<li>item2</li>
<li>item3</li>
</ol>
</li>
</ol>
<ol>
<li>item1
<ol>
<li>item2</li>
</ol>
</li>
<li>item1
<ol>
<li>item2</li>
<li>item3</li>
</ol>
</li>
</ol>
Not sure if this is useful but; just achieved this via CSS. Have to specify the start value in the CSS so it might not work for you.
And the CSS:
body ol {
list-style-type: none;
counter-reset: level1 50;
}
ol li:before {
content: counter(level1) ". ";
counter-increment: level1;
}
ol li ol {
list-style-type: none;
counter-reset: level2;
}
ol li ol li:before {
content: counter(level1) "." counter(level2) " ";
counter-increment: level2;
}
In this circumstance you would get:
50 Item
50.1 Sub-Item
you could try the counter-reset property (http://www.w3schools.com/cssref/pr_gen_counter-reset.asp)
you would declare: counter-reset: section;
on the enclosing element and then:
ol li { counter-reset: subsection; }
ol li:before {
counter-increment: section;
content: counter(section) ".";
}
ol li ol li { counter-reset: subsection; }
ol li ol li:before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) ".";
}
etc...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With