I've been working on doing some Sharepoint customisations for work, and I was trying to fix the nested OL numbering, when I came across this strange problem.
When you have multiple OL's on a page, and use the generally accepted solution for nested numbering (See: Html ordered list 1.1, 1.2 (Nested counters and scope) not working), the numbering continues on from the previous OL when the second OL is within a div tag.
<html>
<head>
<style>
ol { counter-reset: item; }
ol > li{ display: block; counter-increment: item; }
ol > li:before { content: counters(item, ".") " "; }
</style>
</head>
<body>
<ol>
<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</li>
</ol>
<div>
<ol>
<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</li>
</ol>
</div>
</body>
See http://jsfiddle.net/C5Cjp/ for an example.
I'm new to counters, so I'm curious to know why this functionality is working as it does in the example, and if there's an easy way to fix it so that the second unrelated OL's counter resets.
I'm have tested you code .Problem is with div tag .
Solution :
1.> Remove the div tag of 2nd ol list.
2.> Put both in ol list in div tag.
<body>
<div>
<ol>
<li>One</li>
<li>Two
<ol class="a">
<li>Two One</li>
<li>Two Two</li>
<li>Two Three</li>
</ol>
</li>
<li>Three</li>
<li>Four</li>
</ol>
</div>
<div>
<ol>
<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</li>
</ol>
</div>
</body>
Related
This question already has answers here:
Proper way to make HTML nested list?
(7 answers)
Closed 3 years ago.
I am just using simple HTML to code something like this:
This is what I wanted to code:
But this is the output I’m getting:
The section 1.2 should have started from II instead of III because of the outer ordered list.
This is the code I am using:
<h1>Table of Contents For My Book</h1>
<ol>
<li>Chapter One</li>
<ol type="I">
<li>Section 1.1</li>
<ol type="i">
<li>First Topic</li>
<li>Second Topic</li>
<ul>
<li>subtopic 1</li>
<li>subtopic 2</li>
</ul>
</ol>
<li>Section1.2</li>
<li>Section1.3</li>
</ol>
Try nesting the list as follows:
<h1>Table of Contents For My Book</h1>
<ol>
<li>Chapter One
<ol type="I">
<li>Section 1.1
<ol type="i">
<li>First Topic</li>
<li>Second Topic
<ul>
<li>subtopic 1</li>
<li>subtopic 2</li>
</ul>
</li>
</ol>
</li>
<li>Section1.2</li>
<li>Section1.3</li>
</ol>
</li>
<li>Chapter Two</li>
</ol>
I have problem with css styling of my Ordered List.
I have my HTML code:
ol {
counter-reset: item
}
li {
display: block
}
li:before {
content: counters(item, ".")" ";
counter-increment: item
}
<ol>
<li class="sub">one</li>
<li class="">two
<ol>
<li class="small">two.one</li>
<li class="small">two.two</li>
<li class="small">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 I need to hide number value from 1 one, 2 two, 3 three and 4 four
Someone has idea, how to do that, please?
You can mimick the behavior you are looking for by setting the font-size to 0px and this would make the element be counted by the counter property while hiding it.
.hide {
font-size: 0px;
}
<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
<li class="hide">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>
<li class="hide">three.three</li>
<li>three.four</li>
</ol>
</li>
<li>four</li>
</ol>
Source: CSS counter on hidden submenu
I want to select only the first child(list item) of ordered list, which I did using.
.ci-content ol.my-list > li:first-child{
color:green; //selected item in green..
}
check the problem here
Can I achieve the same without using "my-list" class in the selector?...how do I restrict the depth of selection.
Note: I can have ol anywhere, not immediately inside '.ci-content' always.
<ol class="my-list">First set
<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</li>
</ol>
<br><br>
<ol class="my-list">Second Set
<li>one</li>
<li>two</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</li>
</ol>
NOTE:
Due to some of the answers/comments left below (with which I agree), I feel this question is too vague, and does not explain sufficiently my problem. I was too hurried when I put it together, and this has caused the incorrect answers, for which I accept the fault. Due to the current answers and comments, I feel that even if I edited this question again, that future viewers would be confused by the answers/comments on the page, unless everyone were to update them as well. Because of this, i have created another question that completely clarifies my problem. Again, I apologize for the confusion I caused on this question.
The clarified question can be found here: Style an Ordered List like “X.X” based on list start attribute
I am working on updating a client website that contains a policy page. Within the policy are nine different sections, each with their own content. Inside each section are different section statements, which should have the numbering system of "x.x". However, this does not exist in basic HTML. In addition, some sections have various different forms of ordered lists inside themselves.
I have determined that I do not want to tackle this problem in a nested way, that is to say like this:
<ol>
<li>Section 1
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</li>
</ol>
This is the way that every other answer I have looked at treats the problem. Rather, I wish to tackle it like this (code for below sample). I want a list that simply displays "x.1, x.2, x.3," where 'x' is dependent on the start number of that particular list.
<h2>Section 1</h2>
<strong>Heading 1</strong>
<ol class="specialList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<strong>Heading 2</strong
<ol type="lower-roman">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h2>Section 2</h2>
<ol class="specialList">
<li>
<ol type="upper-alpha">
<li>First subitem</li>
<li>Second subitem</li>
</ol>
</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h2>Section 3</h2>
<ol class="specialList">
<li>First item
<ol type="circle">
<li>First subitem</li>
<li>Second subitem</li>
</ol>
</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<h2>Section 4</h2>
<ol class="specialList">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Section 1
Heading
1.1 First item
1.2 Second item
1.3 Third item
Heading 2
i. First item
ii. Second item
iii. Third item
Section 2
2.1 First item
A. First subitem
B. Second subitem
2.2 Second item
2.3 Third item
Section 3
3.1 First item
• First subitem
• Second subitem
3.2 Second item
3.3 Third item
Section 4
4.1 First item
4.2 Second item
4.3 Third item
This way, I can avoid using a nested ordered list, and hopefully simplify the matter, especially the necessary CSS. It will mean hardcoding some start value attributes in to each ordered list, but the policy sections will not change frequently, so this should not matter.
I do not wish to use JavaScript, as the client wants it to look this way regardless of the user's setup. The pages are JSP pages, so if there is a way to set it up to dynamically generate, that would be acceptable.
I have already looked at these links below. While they are excellent questions, none of them answer my specific question. The first deals with nested ordered lists, while I am dealing with a single ordered list. The second one has the right idea, but is still a bit different (has "x.x.x", while I only want "x.x").
Can Ordered List Produce Results that looks like 1.1?
Achieve sub numbering on ordered list
Please let me know if I need to clarify anything! Thanks!
Summary
In conclusion, the client wants a list that will start at "x.1" and go as far as necessary, where "x" is a given start value attribute for the specific list. I just clarified this matter with them, which is the reason for this "update" of requirements. Basically, I need a class that changes the numbering system of the top level of a list to the "x.x" format (again, where the first "x" is the starting value"). Any sublists (nested lists) will not follow this format, but will follow another format as specified by the "type" or "list-style" attribute.
Took a while to figure this one out!
here is my fiddle
h2.title {
font-size: 20px;
font-weight: 800;
margin-left: -20px;
padding: 12px;
counter-increment: ordem;
}
li.heading {
font-size: 16px;
font-weight: bold;
padding: 12px;
list-style-type: none;
}
.bullet {
counter-reset: bullet;
padding-left: 12px;
}
.bullet li {
list-style-type: none;
}
.bullet li:before {
counter-increment: bullet;
content: counter(ordem)"." counter(bullet)" ";
}
ol.none {
list-style: none!important
}
li.s2sub::before {
counter-increment: none!important;
content: none!important;
}
li.s2sub {
list-style: upper-alpha;
}
li.s3sub::before {
counter-increment: none!important;
content: none!important;
}
li.s3sub {
list-style-type: circle;
}
li.roman::before {
counter-increment: none!important;
content: none!important;
}
li.roman {
list-style: lower-roman inside;
}
<body>
<ol>
<h2 class="title">Section 1</h2>
<li class="heading">Heading 1</li>
<ol class="bullet">
<li>text 1 one</li>
<li>text 1 two</li>
<li>text 1 three</li>
<li>text 1 four</li>
</ol>
<li class="heading">Heading 2</li>
<ol class="bullet">
<li class="roman">Item 1</li>
<li class="roman">Item 2</li>
<li class="roman">Item 3</li>
</ol>
<h2 class="title">Section 2</h2>
<ol class="bullet">
<li>First item
<ol>
<li class="s2sub">First subitem</li>
<li class="s2sub">Second subitem</li>
</ol>
</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h2 class="title">Section 3</h2>
<ol class="bullet">
<li>First item
<ol>
<li class="s3sub">First subitem</li>
<li class="s3sub">Second subitem</li>
</ol>
</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</ol>
</body>
I got it to work like so:
body{
counter-reset: section children;
}
li{
list-style:none;
}
.parent::before {
counter-increment: section;
content: counter(section) " - ";
}
.parent li:first-child{
counter-reset:children;
}
.parent li::before{
counter-increment: children;
content: counter(section) "." counter(children) " - ";
}
<ol>
<li class="parent">Section 1
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</li>
<li class="parent">Section 2
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</li>
</ol>
I removed the list style, since it isn't necessary.
What this does is create two separate counters for the children and the sections, then resets the children counter on every new section.
JSFiddle Demo
I am trying to use HTML to:
Create 2 Ordered Lists
Within Each of the O.L. nest a Unordered List and add some elements inside
However, my numbering isn't working the way it should, I'm getting, 1. 1. rather than 1. 2. etc.
My code:
<ol>
<li>Fruits</li>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Plum</li>
<li>Watermelon</li>
</ul>
</ol>
<ol>
<li>Vegetables</li>
<ul>
<li>Carrots</li>
<li>Lettuce</li>
<li>Cucumber</li>
<li>Tomato</li>
</ul>
</ol>
Sounds like you actually want 1 ordered list, not 2. If you expect the first one to have the number 1 and and the second one to have the number 2, that's one list. The numbers will reset if you start a new list.
<ol>
<li>Fruits
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Plum</li>
<li>Watermelon</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrots</li>
<li>Lettuce</li>
<li>Cucumber</li>
<li>Tomato</li>
</ul>
</li>
</ol>
Not sure why everyone's answering against the docs, officially, you CANNOT nest <ul> element as a direct child to <ol> element and vice versa, so I've modified the markup accordingly.
Demo
<ol>
<li>
<h2>Fruits</h2>
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
</li>
<li>
<h2>Vegetables</h2>
<ul>
<li>Carrot</li>
</ul>
</li>
</ol>
Here, you can adjust the padding and margin of the unordered lists as required by you but I just gave a general idea of how it should be.
You can also use <p> or any other tag at the place of <h2> but I think <h2> or <h3> should fit well for your case.
You're ending the ordered list after the first line. Don't put the tag in untill the end of the entire ordered list. Example below.
<ol>
<li>Fruits</li>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Plum</li>
<li>Watermelon</li>
</ul>
<li>Vegetables</li>
<ul>
<li>Carrots</li>
<li>Lettuce</li>
<li>Cucumber</li>
<li>Tomato</li>
</ul>
</ol>
Maybe you don't use the list-style-property but the counter-increment-property instead so your HTML stays as it is.
ol {
counter-increment: section;
}
ol > li {
list-style-type: none;
}
ol > li:before {
content: counter(section)". ";
}
<ol>
<li>Fruits</li>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Plum</li>
<li>Watermelon</li>
</ul>
</ol>
<ol>
<li>Vegetables</li>
<ul>
<li>Carrots</li>
<li>Lettuce</li>
<li>Cucumber</li>
<li>Tomato</li>
</ul>
</ol>