This question already has answers here:
Three level decimal ordered list CSS
(2 answers)
Closed 4 years ago.
The counter is not continuing numbering, I would expect the second li (DEFINITIONS) to have number 2 but it continues the numbering of the nested ol so it has the number 1.2 instead of 2:
list--sub-decimal {
counter-reset: decimal;
> li:before {
counter-increment: decimal;
content: counters(decimal, ".", decimal) " ";
}
}
<ol class="list--none">
<li>
<ol class="list--sub-decimal">
<li class="subItem"><strong>DEFINITIONS</strong></li>
<ol class="list--sub-decimal">
<li class="subItem"><strong>"Agreement"</strong> blaa</li>
</ol>
<li class="subItem"><strong>DEFINITIONS</strong></li>
</ol>
</li>
</ol>
Thanks!!
You need to start by writing valid HTML for stuff like this to work.
Your second <ol class="list--sub-decimal"> is not properly wrapped inside a li, but is a child of the ol above it - which is not allowed.
Once you fix that, it works:
.list--sub-decimal {
counter-reset: decimal;
}
.list--sub-decimal > li:before {
counter-increment: decimal;
content: counters(decimal, ".", decimal) " ";
}
<ol class="list--none">
<li>
<ol class="list--sub-decimal">
<li class="subItem"><strong>DEFINITIONS</strong>
<ol class="list--sub-decimal">
<li class="subItem"><strong>"Agreement"</strong> blaa</li>
</ol>
</li>
<li class="subItem"><strong>DEFINITIONS</strong></li>
</ol>
</li>
</ol>
Related
Problem:
I was looking to replace the browser's default list-style-type with my own custom ::before pseudo-element. I chose this over the ::marker because of some of the styling limitations the ::marker has.
The HTML code I have has "type" attributes that change what kind of character should appear before the li.
HTML code:
<ol type="decimal">
<li>First ordered item</li>
<li>Second ordered item
<ol type="a">
<li>First ordered item</li>
<li>Second ordered item
<ol type="A">
<li>First ordered item</li>
<li>Second ordered item</li>
</ol>
</li>
</ol>
</li>
</ol>
CSS:
This is the CSS I made, using the counter to style it:
ol {
/*list-style-type: none*/
counter-reset: li;
}
ol > li:before {
counter-increment: li;
content: counter(li) ". ";
position: relative;
top: auto;
left: auto;
margin-right: 10px;
color: red;
}
ol[type="decimal"] > li:before {
content: counter(li, decimal) ". ";
}
ol[type="a" s] > li:before {
content: counter(li, lower-alpha) ". ";
}
ol[type="A" s] > li:before {
content: counter(li, upper-alpha) ". ";
}
The "s" after type="a" and type="A" means case-sensitive matches. https://caniuse.com/css-case-insensitive
Firefox vs Chrome:
Looking at the rendered, red characters:
Firefox renders these lists correctly, with the first two being numbers, and the second two being lowercase letters and the last two being uppercase letters.
Chrome renders them incorrectly, with everything being numbers.
Is this an issue with my code/browser support, or is this a bug in Google Chrome?
ol {
/*list-style-type: none*/
counter-reset: li;
}
ol > li:before {
counter-increment: li;
content: counter(li) ". ";
position: relative;
top: auto;
left: auto;
margin-right: 10px;
color: red;
}
ol[type="decimal"] > li:before {
content: counter(li, decimal) ". ";
}
ol[type="a" s] > li:before {
content: counter(li, lower-alpha) ". ";
}
ol[type="A" s] > li:before {
content: counter(li, upper-alpha) ". ";
}
<ol type="decimal">
<li>First ordered item</li>
<li>Second ordered item
<ol type="a">
<li>First ordered item</li>
<li>Second ordered item
<ol type="A">
<li>First ordered item</li>
<li>Second ordered item</li>
</ol>
</li>
</ol>
</li>
</ol>
Thank you.
According to caniuse Chrome does not support the case sensitive modifier at the moment (Decmber 2022).
The link you gave goes to the case-insensitive modifier, which Chrome does support it seems.
So it's an issue with browser support rather than a bug as such or an issue with your code
Description:- Counter is incrementing contentiously on slide toggle. it's giving contentious number to the li outside ol. issue is coming in chrome and it's working fine in Mozilla. so what's the solution for this?
I have attached output file at bottom.
<ol class="nav">
<li>
Parent-1
<ol class="nav">
<li>child1</li>
<li>child2</li>
</ol>
</li>
<li>parent-2
<ol class="nav">
<li>
child-1
<ol class="nav">
<li>inner-most-1</li>
<li>innner-most-2</li>
</ol>
</li>
<li>child-2</li>
</ol>
</li>
<li>parent-3</li>
</ol>
Jquery
$(function() {
$(".nav ol").hide();
$(".nav > li > a").click(function(e) {
$(this).siblings("ol").slideToggle();
e.preventDefault();
});
});
CSS:-
ol{
counter-reset: section;
list-style-type: none;
}
ol li{
counter-increment: section;
}
ol li:before {
content: counters(section,".") " ";
}
OTPUT looks like
Output -2
JS_Fiddle:-
https://jsfiddle.net/tushar115/f6zvu8w5/10/
This is an bug in Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=822260 I'm thinking the only solution will be for Google to fix this. Otherwise someone would have to recreate the entire functionality of numbered lists.
I want to create css to generate the following nested list.
1. item1
subitem
subitem
2. item2
subitem
subitem
What I want is to modify the numbers (either bold or red). I searched in the internet but what I found was css for an ordered list. When I create a nested list with that css, what I obtain is extra numbers in place of the bullets. Can someone help?
You can use CSS counter only on li's that are direct children of ol with this HTML structure and then change color and font-weight.
ol {
list-style: none;
counter-reset: ol-counter;
}
ol > li:before {
counter-increment: ol-counter;
content: counter(ol-counter) ". ";
color: red;
font-weight: bold;
}
<ol>
<li>item1
<ul>
<li>sub item</li>
<li>sub item</li>
</ul>
</li>
<li>item2
<ul>
<li>sub item</li>
<li>sub item</li>
</ul>
</li>
</ol>
I will use an other design for an ordered list. So I found a nice solution here on SO.
body { counter-reset: item; }
ol.numbered_style li:before
{
counter-increment:item;
margin-bottom:5px;
margin-right:10px;
content:counter(item);
background:gold;
border-radius:100%;
color:white;
width:1.2em;
text-align:center;
display:inline-block;
}
ol.none, ul.none,ol.numbered_style { list-style: none; }
<ol class="numbered_style">
<li>First</li>
<li>Second</li>
<li>Third
<ol class="none">
<li>Subitem</li>
</ol>
</li>
<li>Fourth
<ul class="none">
<li>Other Subitem</li>
</ul>
</li>
</ol>
How is it possible not to use this style for sub-items in a list?
Why isn't the conditions for my class called none not working?
Also what do I have to do, if I want a second ordered list with the same class. It should begin with 1. <ol class="numbered_style" start="1"> didn't helped.
Is it possible to start a ordered list with a specify number like 2 or 1.1? For a normal ol I could use start="number", but I think it is disabled because of ol.numbered_style { list-style: none; }.
Adding as an answer since there are more than one part to the question:
How is it possible not to use this style for subitems in a list?
Use the children selector (>) to select only the li that are directly present under the parent ol tag instead of selecting all li elements that are at any level under the parent ol tag. The list-style setting has no effect here because the numbering here is generated and added using counters.
But what do I have to do, if I want a second ordered list with the same class. It should began with 1.
Add a counter-reset with the ol.numbered_style selector so that the number is reset everytime that element is encountered. This will make it restart at 1.
I don't need this now, but is there also a solution to start this ordered list with a specify number like 2 or 1.1?
Yes, starting it at 2 is possible. In the counter-reset property we can also provide the initial value of the counter (as the second in a list of space separated values). Refer below snippet for a demo.
body, ol.numbered_style {
counter-reset: item;
}
ol.numbered_style.starts_at_2 {
counter-reset: item 1; /* the second is the start value, default is 0 */
}
ol.numbered_style > li:before {
counter-increment: item;
margin-bottom: 5px;
margin-right: 10px;
content: counter(item);
background: gold;
border-radius: 100%;
color: white;
width: 1.2em;
text-align: center;
display: inline-block;
}
ol.none, ul.none, ol.numbered_style {
list-style: none;
}
<ol class="numbered_style">
<li>First</li>
<li>Second</li>
<li>Third
<ol class="none">
<li>Subitem</li>
</ol>
</li>
<li>Fourth
<ul class="none">
<li>Other Subitem</li>
</ul>
</li>
</ol>
<ol class="numbered_style">
<li>First</li>
<li>Second</li>
<li>Third
<ol class="none">
<li>Subitem</li>
</ol>
</li>
<li>Fourth
<ul class="none">
<li>Other Subitem</li>
</ul>
</li>
</ol>
<ol class="numbered_style starts_at_2">
<li>First</li>
<li>Second</li>
<li>Third
<ol class="none">
<li>Subitem</li>
</ol>
</li>
<li>Fourth
<ul class="none">
<li>Other Subitem</li>
</ul>
</li>
</ol>
Making it start at 1.1 is a bit more tricky as we have to add one counter at ol level and another at li level. Below is a sample demo.
body{
counter-reset: ol ;
}
ol.numbered_style{
counter-reset: li;
counter-increment: ol;
}
ol.numbered_style > li:before {
counter-increment: li;
content: counter(ol) "." counter(li);
margin-bottom: 5px;
margin-right: 10px;
background: gold;
border-radius: 100%;
color: white;
width: 2em;
text-align: center;
line-height: 2em;
display: inline-block;
}
ol.none, ul.none, ol.numbered_style {
list-style: none;
}
<ol class="numbered_style">
<li>First</li>
<li>Second</li>
<li>Third
<ol class="none">
<li>Subitem</li>
</ol>
</li>
<li>Fourth
<ul class="none">
<li>Other Subitem</li>
</ul>
</li>
</ol>
I need a help to get a., b. style inner indent instead of 2.2.1., 2.2.2.. Found the original CSS code from HTML ordered list indent to keep original numbering
My code:
<style>
ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") ". "; counter-increment: item }
</style>
<ol>
<li>One</li>
<li>
Two
<ol>
<li>Two one</li>
<li>
Two two
<ol type="a">
<li>Two two a</li>
<li>Two two b</li>
</ol>
</li>
<li>Two three</li>
</ol>
</li>
<li>Three</li>
</ol>
What I'm getting:
1. One
2. Two
2.1. Two one
2.2. Two two
2.2.1. Two two a
2.2.2. Two two b
2.3. Two three
3. Three
What I need:
1. One
2. Two
2.1. Two one
2.2. Two two
a. Two two a
b. Two two b
2.3. Two three
3. Three
Since you don't need to prepend the inner lists with the section numbering, you can add an additional rule using counter to get the letters:
ol {
counter-reset: item;
}
li {
list-style: none;
}
li:before {
content: counters(item, ".")". ";
counter-increment: item
}
ol ol ol li:before {
content: counter(item, lower-alpha)". ";
}
Details: http://jsfiddle.net/kmAJ6/3/. Should work with your existing HTML.
Your type attribute has no effect because your css replaces the default numbering. One way around this would be to update your css rules to only target the first 2 levels and let the 3rd level use the default numbering. This will then let your type attribute take effect.
http://jsfiddle.net/TbjcV/
.level1,
.level2{
counter-reset: item
}
.level1 > li,
.level2 > li{
display: block
}
.level1 > li:before,
.level2 > li:before{
content: counters(item, ".") ". ";
counter-increment: item
}
<ol class="level1">
<li>One</li>
<li>
Two
<ol class="level2">
<li>Two one</li>
<li>
Two two
<ol type="a" class="level3">
<li type="a">Two two a</li>
<li>Two two b</li>
</ol>
</li>
<li>Two three</li>
</ol>
</li>
<li>Three</li>
</ol>
I got this:
<style>
ol.cnt { counter-reset: item }
ol.cnt > li { display: block }
ol.cnt > li:before { content: counters(item, ".") ". "; counter-increment: item }
</style>
html:
<ol class="cnt">
<li>One</li>
<li>
Two
<ol class="cnt">
<li>Two one</li>
<li>
Two two
<ol type="a">
<li>Two two a</li>
<li>Two two b</li>
</ol>
</li>
<li>Two three</li>
</ol>
</li>
<li>Three</li>
</ol>
a bit messy, but seems to work.