A styled ordered list whose nested list should have numbers with letters using CSS counter property
Sure, you can do anything that the <ol> can do.
ol.numbered_style.start_3{
counter-reset: item2;
}
ol.numbered_style.start_3 li:before {
counter-increment:item2;
content:counter(item2, upper-latin);
}/* List Style Type========^----------^*/
Counter List Style Types
decimal ------------------------------- 1, 2, 3, ...
decimal-leading-zero -------------- 01, 02, 03, ... 09, 10, 11, ...
lower-alpha,
lower-latin ----------- a, b, c, ... z, aa, ab, ...upper-alpha,
upper-latin ---------- A, B, C, ... Z, AA, AB, ...lower-roman ------------------------ i, ii, iii, iv, v, vi, ...
upper-roman ------------------------ I, II, III, IV, V, VI, ...
asterisks -----------------------------
*, **, ***,...
REFERENCE
http://www.princexml.com/doc/5.1/counters/
SNIPPET
body { counter-reset: item; }
ol.numbered_style li:before{ counter-increment:item; margin-bottom:5px; margin-right:10px; content:counter(item, upper-roman); background:blue; border-radius:100%; color:white; width:1.2em; text-align:center; display:inline-block;}ol.numbered_style.start_3{ counter-reset: item2; }
ol.numbered_style.start_3 li:before {
counter-increment:item2; margin-bottom:5px; margin-right:10px; content:"3"counter(item2, upper-latin); background:blue; 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 Lorem Ipsum <ol class="numbered_style start_3"> <li>missing an a after the number</li> <li>missing an b after the number</li> <li>missing an c after the number</li> </ol> </li></ol>CSS nested ordered list numbered with alphanumerical characters
To achieve expected result, use type -'a' for orderlist
<ol type="a"> <li>one</li> <li>two <ol type="a"> <li>three</li> <li>four</li> <li>five</li></ol></li></ol>HTML CSS Issues in implementing nested ordering which includes numbers, alphabets and roman numbers
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>A Styled Ordered List Whose Nested List Should Have Numbers with Letters Using CSS Counter Propertyaaa</li> <li>bbb</li> </ol> </li>
</ol> </li>
<li>Main Line 22222222 <ol class="sub-num-list"> <li>Sub Line 111111111 <ol class="sub-albhabatical-list"> <li>A Styled Ordered List Whose Nested List Should Have Numbers with Letters Using CSS Counter Propertyaaa</li> <li>bbb</li> </ol> </li> <li>Sub Line 22222222 <ol class="sub-albhabatical-list"> <li>A Styled Ordered List Whose Nested List Should Have Numbers with Letters Using CSS Counter Propertyaaa <ol class="sub-roman-list"> <li>moreeeeee</li> <li>moreeeeee</li> </ol> </li> <li>bbb <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>A Styled Ordered List Whose Nested List Should Have Numbers with Letters Using CSS Counter Propertyaaa</li> <li>bbb</li> </ol> </li> </ol> </li> </ol></div>Style subitems in ordered list numbers with CSS
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>Nested counters HTML list 1 1.1 a i - is this possible
It is slightly different to the linked answer.
Firstly, there is a wrongly nested ordered list in your questions HTML. The closing tag of <li>three.two</li> should wrap <ol type="a">
We need to remove the content for lower levels with:
ol li li li:before {
display: none;
}
Change the counter slightly for the second level:
ol li li:before {
content: counters(item, ".")" ";
counter-increment: item;
}
and give our lower levels their styles (the list style should be consistent, so no need for classes):
ol li li li {
list-style: lower-alpha;
}
/* Every step down from here will take this property */
ol li li li li {
list-style: lower-roman;
}
Of course, we can override with classes, for one level, if really needed:
ol.alpha li {
list-style: lower-alpha;
}
Complete Example
ol { counter-reset: item;}ol li { list-style: none;}ol li:before { content: counters(item, ".")". "; counter-increment: item;}ol li li:before { content: counters(item, ".")" "; counter-increment: item;}ol li li li:before { display: none;}ol li li li { list-style: lower-alpha;}/* Every step down from here will take this property */
ol li li li li { list-style: lower-roman;}/* Override with classes */
ol.alpha li { list-style: lower-alpha;}<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 <ol> <li>three.two.one</li> <li>three.two.two
<ol> <li>three.two.one</li> <li>three.two.two <ol> <li>three.two.one</li> <li>three.two.two <ol class="alpha"> <li>three.two.one</li> <li>three.two.two</li> </ol> </li> </ol> </li> </ol> </li> </ol> </li> </ol> </li> </ol> </li> <li>four</li></ol>Is it possible to specify a starting number for an ordered list?
If you need the functionality to start an ordered list (OL) at a specific point, you'll have to specify your doctype as HTML 5; which is:
<!doctype html>
With that doctype, it is valid to set a start attribute on an ordered list. Such as:
<ol start="6"> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li></ol>Ordered List (ol) showing up un-numbered?
It's going to be a CSS issue. CSS can change the numbering/bullet style, and even turn it off altogether. Using Firebug, inspect the element and look at the CSS styles on the right to see what styles are being applied to it. Look for one called list-style.
list styling applying to nested list elements in css
When you use ul li it targets all li elements which are child of ul so logically, all the li nested under ul gets affected. If you want to target only 1st level of li elements you can use
body > ul > li {
width: 100%;
}
The above selector selects li element which is directly nested under ul which is further directly nested to body. This way it won't select the nested ul element as it is not a direct child of the body element.
Replace body if you have any parent wrapper with a class or an id. Make sure you just don't use ul > li because this way it will again select the nested li as well.
Related Topics
CSS How to Only Make Bold Fonts for First <Ul> Set
Overlaping Effect on Cards with Pure CSS
Display Content Only on Mobile Devices
What Is The 'Best Practice' Way of Creating an Icon Button with an Svg
What Are Common Classes, Helper Classes, and Utility Classes in CSS
How to Add a Top and Bottom Shadow While Scrolling But Only When Needed
How to Refer to an Internal Gradient Definition Inside an Svg Sprite Symbol
Does The Order of Styles Matter
Make a Div Display Under Another Using CSS in a Totally Fluid Layout
How to Select The Last-Child of The Last-Child
Navigation Menu on The Left Side with Close and Open Button in ASP.NET Core Razor Pages Application
Vuetify Without Vue-Cli Sass/Scss Conflict
How to Make a Wordpress Theme Full Width
How to Embed an CSS Background Image Link with Jsf