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
Related
This question already has answers here:
CSS counter-reset on nested list
(3 answers)
Closed 4 years ago.
I formatted the ordered list with sub-items. Another <ol> is inside a <div> and the numbers are wrong; why?
OL {
counter-reset: item;
padding-left: 10px;
}
LI {
display: list-item
}
LI:before {
content: counters(item, ".") " ";
counter-increment: item
}
<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
</ol>
</li>
</ol>
<hr />
<div>
<ol>
<li>one
<ol>
<li>one.one</li>
</ol>
</li>
</ol>
</div>
Please check this:
http://jsfiddle.net/PTbGc/1265/
You can use separate div tag for that. Check this snippets
OL {
counter-reset: item;
padding-left: 10px;
}
LI {
display: list-item
}
LI:before {
content: counters(item, ".") " ";
counter-increment: item
}
<div>
<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
</ol>
</li>
</ol>
</div>
<hr />
<div>
<ol>
<li>one
<ol>
<li>one.one</li>
</ol>
</li>
</ol>
</div>
you can use separate div tags
ol {
counter-reset: item
}
li {
display: block
}
li:before {
content: counters(item, ".") " ";
counter-increment: item
}
<div>
<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>
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>
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>
I have a three level ordered list in html that I would like to give a style as following:
1. Item 1
1.1 Item 2
1.1.1 Item 3
An example of the html is in the next plunker:
http://plnkr.co/edit/DqhZ5pJILTUHGSNaA1vm?p=preview
I have done a style recommended in the internet with css like
ol { counter-reset: item }
li:before { content: counters(item, "."); counter-increment: item }
but it doesn't seem working.
Please, any comment related would be a great help.
Use the following code:
html:
<ol>
<li> Should be Item 1
<ol>
<li> Should be Item 1.1</li>
<li> Should be Item 1.2</li>
<li> Should be Item 1.3
<ol>
<li> Should be Item 1.3.1
</ol>
<li>Should be Item 1.4</li>
</ol>
</li>
<li> Should be Item 2</li>
</ol>
css:
ol { counter-reset: item }
ol li { display: block }
ol li:before { content: counters(item, ".") ". "; counter-increment: item }
your css code is almost fine, see http://plnkr.co/edit/wmGhz7V6CKqZ7MmHIoDF?p=preview
you have an extra </li><li> after level 1, so your markup becomes
<ol>
<li> Should be Item 1
<ol>
<li> Should be Item 1.1</li>
<li> Should be Item 1.2</li>
<li> Should be Item 1.3
<ol>
<li> Should be Item 1.3.1</li>
</ol>
</li>
<li>Should be Item 1.4</li>
</ol>
</li>
<li> Should be Item 2</li>
</ol>
and in your css I've removed the base list style for ol with list-style: none;
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>