How to set numbering list with a custom number like this:
1). Item
2). Item
a). Sub Item
b). Sub Item
Please help....
You just need to add a list into another list, just like this:
<ol id="main">
<li>Item 1</li>
<li>Item 2</li>
<ol>
<li>Item 3.1</li>
<li>Item 3.2</li>
</ol>
</ol>
than you can change what is in front of each item by CSS. For example like this:
ol#main {
list-style-type: decimal;
}
ol#main > ol {
list-style-type: lower-alpha;
}
more about list-style-type property: http://www.w3schools.com/cssref/pr_list-style-type.asp
more about list-style property: http://www.w3schools.com/cssref/pr_list-style.asp
Related
I'd like to have an ordered list with a closing bracket after each decimal like so:
1.) Item 1
2.) Item 2
3.) Item 3
My problem is that any code I can find changes all lists in a document, but I'd like to have the brackets only for specific lists.
I tried to create a class, but apparently "ol" doesn't accept "classes", or does it?.
Here's the code I have so far, which results in every list receiving brackets:
<style>
ol > li::marker {
content:counter(list-item) ") ";
}
</style>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ol>
ol certainly supports classes, your implementation must be incorrect somewhere.
ol.braces>li::marker {
content: counter(list-item) ".) ";
color: red;
}
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<ol class="braces">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
I'm trying to style the first-child in a parent list:
ol:first-child > li {
color: red;
}
<ol>
<li>Numbered list item 1</li>
<li>Numbered list item 2
<ol>
<li>sublist item 1</li>
<li>sublist item 2</li>
</ol>
</li>
<li>Numbered list item 3</li>
</ol>
https://jsfiddle.net/cvuw2bd1/1/
not the sublist. But if I close second list item before starting the sublist it works.
<li>Numbered list item 2</li>
<ol>...
As shown here:
ol:first-child > li {
color: red;
}
<ol>
<li>Numbered list item 1</li>
<li>Numbered list item 2</li>
<ol>
<li>sublist item 1</li>
<li>sublist item 2</li>
</ol>
<li>Numbered list item 3</li>
</ol>
https://jsfiddle.net/cvuw2bd1/
Unfortunately, I can't change the HTML only the CSS. Is there a way around this so that the sublist is excluded in the first example. (I can't add any classes or ids.)
The ol you are targeting with ol:first-child > li is the first, last and only child in the HTML structure. It has no siblings. The same goes for the nested ol.
The ol elements have vertical (ancestor-descendant), not lateral (sibling), relationships.
So don't use nth-child pseudo-classes. Use descendant combinators.
li {
color: red;
}
li li {
color: black;
}
<ol>
<li>Numbered list item 1</li>
<li>Numbered list item 2
<ol>
<li>sublist item 1</li>
<li>sublist item 2</li>
</ol>
</li>
<li>Numbered list item 3</li>
</ol>
Also, when dealing with the color property, it's important to be familiar with the concept of inheritance. Here's an explanation:
CSS :not pseudo-class not working
You can apply style to the child element of li if you can not change the html
ol:first-child > li {
color: red;
}
li li{
color:black !important;
}
<ol>
<li>Numbered list item 1</li>
<li>Numbered list item 2
<ol>
<li>sublist item 1</li>
<li>sublist item 2</li>
</ol>
</li>
<li>Numbered list item 3</li>
</ol>
last but not the least... If it does not work use important
I have an <ol> tag (ordered list) in my HTML document.
I would like it to display items in the following format:
(i) Item 1
(ii) Item 2
(iii) Item 3
Currently I have it working with the following HTML code:
<ol type="i">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
This gives me the following result:
i. Item 1
ii. Item 2
iii. Item 3
Is it possible to display my list in the desired way I mentioned at the beginning of this question?
EDIT: Follow up question which is also part of accepted answer
How can I get wrapped items (items that are too long for one line) to automatically start new lines on the same tab line?
Using only CSS3, you can do it as follows:
ol {
counter-reset: increment_var;
list-style-type: none;
}
li:before {
display: inline-block;
content: "(" counter(increment_var, lower-roman) ") ";
counter-increment: increment_var;
width: 40px;
margin-left: -40px;
}
li {
margin-left: 40px;
}
<ol>
<li>Example 1 Example 1 Example 1 Example 1 Example 1 Example 1 Example 1 Example 1 Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
<li>Example 4</li>
<li>Example 5</li>
</ol>
I have a problem with displaying a big ordoned list. Here I wrote just for 1000, but imagine how will look for 100000 elements.
Anyway maybe that won't be a problem to big, but after 9999, the 1 from 10000 get hidden.
1. Element 1
2. Element 1
10. Element 10
100. Element 100
1000. Element 1000
To avoid that I would like to display it like:
1. Element 1
2. Element 1
10. Element 10
100. Element 100
1000. Element 1000
I tried to put float:right on li and ol li but didn't help.
Is there any css trick that can help with this?
.list ol li {
margin-left:55px;
}
//margin-left:55px to avoid hidding first digit. Ugly method, I know.
.list ol li {
float:right;
position:relative;
}
.list is the class containing this ordoned list.
Use this to left align the ordered list -
HTML:
<ol>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
<li>Element 6</li>
<li>Element 7</li>
<li>Element 8</li>
<li>Element 9</li>
<li>Element 10</li>
<li>Element 11</li>
</ol>
CSS:
ol{ list-style-position: inside;}
Cheers!!!
Demo
You can use list-style as
ol {
list-style: <list-style-type> || <list-style-position> || <list-style-image>;
}
You need list-style-position : inside as below
ol {
list-style:decimal inside none;
}
Read here for more details
ul{border:1px solid red;padding:0;margin:0;list-style:decimal inside;position:relative;}
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
In my application I have a page which lists some data grouped by categories.
Each item on the list can have subitems.
So I'd it to look like this:
List item
1.1 List item
1.2 List item
List item
2.1 List item
2.2 List item
I can achieve this easily using this three lines of css code:
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }
However on this page I have tabs for each category, which contains such nested list of items and I want to make index of first item of next tab to be x+1-th item, where x is number of last item from previous tab ( category ).
#tab 1
1. List item
1.1 List item
1.2 List item
2. List item
2.1 List item
2.2 List item
#tab 2
3. List item
3.1 List item
3.2 List item
4. List item
4.1 List item
4.2 List item
So I need functionality to provide starting index to <ol> tag. I found out that there is attribute start="x", however it doesn't work with these 3 lines of css code for nested lists.
Any idea how to do something like this?
Just remove the css, and correctly close and reopen <ol> tags.
If you need to split the list in two separate tabs, you have to close the first <ol> inside the first tab. Then, reopen the new list with the start parameter inside the second tab: <ol start="3">.
Working fiddle - (I set start="5" to show it's working; for your purposes, just set it to 3 or what you need)
UPDATE:
Keep the CSS, and wrap all the tabs in the main <ol> and </ol>, so the counter doesn't reset.
http://jsfiddle.net/qGCUk/227/
From http://www.w3.org/TR/css3-lists/#html4:
/* The start attribute on ol elements */
ol[start] {
counter-reset: list-item attr(start, integer, 1);
counter-increment: list-item -1;
}
Adding this to the CSS allowed the start attribute to be recognized in my tests.
EDIT:
Instead of using the start attribute, you can use CSS classes for each new starting point. The downside is that this will require more maintenance should you need to change anything.
CSS:
ol.start4
{
counter-reset: item 4;
counter-increment: item -1;
}
ol.start6
{
counter-reset: item 6;
counter-increment: item -1;
}
HTML:
<div>
<ol>
<li>Item 1</li>
<li>Item 2
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol></li>
<li>Item 3
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol></li>
</ol>
</div>
<div>
<ol class="start4">
<li>Item 4
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol></li>
<li>Item 5</li>
</ol>
</div>
<div>
<ol class="start6">
<li>Item 6</li>
<li>Item 7
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol></li>
</ol>
</div>