Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I am using ol>li in an HTML file, added styling to it to use the hierarchical numbering like 1, 1.1,1.2, 1.2.1 etc. It works perfectly fine sometimes, but sometimes the numbering gets messy. Instead of starting with next number, it continues the same hierarchy. Refer the attached image, instead of using number 3, the numbering continues as 2.6 and then uses 2.6.1 and so on
here is my css -
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0
}
ol>li {
display: table;
counter-increment: item;
margin-bottom: .6em
}
ol>li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: .3em;
font-size: 14px;
}
li ol>li {
margin: 0
}
li ol>li:before {
content: counters(item, ".") " "
}
li ol>li:before {
content: counters(item, ".") " ";
font-size: small
}
<ol>
<li>List Item 1
<ol>
<li>Indented List Item 1</li>
<li>Indented List Item 2</li>
<li>Indented List Item 3</li>
</ol>
</li>
<li>List Item 2
<ol>
<li>Indented List Item 1</li>
<li>Indented List Item 2</li>
<li>Indented List Item 3</li>
</ol>
</li>
<li>List Item 3
<ol>
<li>Indented List Item 1</li>
<li>Indented List Item 2</li>
<li>Indented List Item 3</li>
</ol>
</li>
<li>List Item 4
<ol>
<li>Indented List Item 1</li>
<li>Indented List Item 2</li>
<li>Indented List Item 3</li>
</ol>
</li>
</ol>
Here is clean code
ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }
<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</li>
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</ol>
</li>
<li>
four
<ol>
<li>Four.one</li>
<li>Four.two</li>
</ol>
</li>
</ol>
Related
I want to create a ordered list that looks like
1.0
1.1
1.11
Currently I get
1
1.1
1.1.0.11
/* First, set all numbered lists to use counter-reset */
OL { counter-reset: item }
/* Display all list items in a numbered list in block display */
LI { display: block }
/* Use a counter that checks the number of items and adds a "." between them and ends with ". " */
LI:before { content: counters(item, ".") " "; counter-increment: item }
/* */
ol ol ol {counter-reset: item 10; }
ol ol ol:nth-child(1) {counter-reset: item 10;}
<ol>
<li>Test Level 1</li>
<ol>
<li>Test Level 2</li>
<ol>
<li>Test Level 3</li>
<li>Test Level 4</li>
<li> </li>
</ol>
</ol>
</ol>
Is it possible to create an ordered list with positive to negative without zero using only CSS?
Example:
3. Highest
2. Higher
1. High
-1. Low
-2. Lower
-3. Lowest
I understand the presentation is highly unusual. The intent is to create, with one field, a list of most and least favorites.
Some technical background: The field is generated in Joomla! CMS via FLEXIcontent's Text Field. The field is configured to be able to take multiple entries, and is restricted to only be able to take an even number of entries. The user is required to input an equal number of pros and cons for the given field. I'd like to be able to control everything exclusively in CSS so I don't have to create template overrides, if at all possible.
I've chosen this approach as I don't want to require multiple fields for one set.
I've found various resources for styling the numbers. I believe the following wouldn't work as I'd have to control some factors with PHP or there's limits to the markup:
<ol>
<li value=#>List Item</li> <!--needs value populated by PHP-->
</ol>
<ol reversed> <!--Stays positive and ends at 1-->
<li>Reversed List</li>
</ol>
<ol reversed start=2> <!--Can I control where to start based on number of children?-->
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ol>
If the task is completely impossible, it may be more practical to style based on number of children and color the first and last half differently. Still, it'd be very interesting to see if this is possible with CSS exclusively.
Great question! This is something a little different and an interesting example of what CSS can do.
See the code below for a solution to your problem. If you are using SASS you could easily create a mixin to generate all the selectors you need.
By using CSS counters you can fake the list number and then use nth-child to reset the counter to avoid displaying a 0 item.
Solution with a starting number
ol {
list-style: none;
margin: 0;
padding: 0 0 0 1.5em;
}
ol[start="1"] {
counter-reset: ol 2;
}
ol[start="1"] li:nth-child(2) {
counter-reset: ol 0;
}
ol[start="2"] {
counter-reset: ol 3;
}
ol[start="2"] li:nth-child(3) {
counter-reset: ol 0;
}
ol[start="3"] {
counter-reset: ol 4;
}
ol[start="3"] li:nth-child(4) {
counter-reset: ol 0;
}
ol li::before {
counter-increment: ol -1;
content: counter(ol) '.';
text-align: right;
margin: 0 .5em 0 -1.5em;
display: inline-block;
width: 1em;
}
<h2>Start at 1</h2>
<ol start="1">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
</ol>
<h2>Start at 2</h2>
<ol start="2">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
</ol>
<h2>Start at 3</h2>
<ol start="3">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
</ol>
Solution without starting number but with same number of positive and negative list items
If you want this to work without having to add the start attribute to the ol and always have the same number of positive and negative list items you can use this CSS - but again it requires that you write it out the selectors for all the required numbers of items.
ol {
list-style: none;
margin: 0;
padding: 0 0 0 1.5em;
}
/* two items */
ol li:nth-child(1):nth-last-child(2) {
counter-reset: ol 2;
}
ol li:nth-child(2):nth-last-child(1) {
counter-reset: ol 0;
}
/* fouritems */
ol li:nth-child(1):nth-last-child(4) {
counter-reset: ol 3;
}
ol li:nth-child(3):nth-last-child(2) {
counter-reset: ol 0;
}
/* six items */
ol li:nth-child(1):nth-last-child(6) {
counter-reset: ol 4;
}
ol li:nth-child(4):nth-last-child(3) {
counter-reset: ol 0;
}
ol li::before {
counter-increment: ol -1;
content: counter(ol) '.';
text-align: right;
margin: 0 .5em 0 -1.5em;
display: inline-block;
width: 1em;
}
<h2>Two Items</h2>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
<h2>Four Items</h2>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
<h2>Six Items</h2>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
</ol>
I have problem to remove indent on the elements 2.1 , 2.2 , 2.3 etc... probably the third numbering level indent will be moved to left after solving that problem.
My code:
ol {
counter-reset: item
}
li {
display: block
}
li:before {
content: counters(item, ".") " ";
counter-increment: item
}
<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>
I tried a lot of ways, but nothing is not correct. Someone do have idea , how to solve that, please?
Add these styles
ol ol {
padding: 0;
}
ol ol ol {
padding: 20px;
}
ol {
counter-reset: item
}
ol ol {
padding: 0;
}
ol ol ol {
padding: 20px;
}
li {
display: block
}
li:before {
content: counters(item, ".") " ";
counter-increment: item
}
<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>
Assuming you can't change the markup, you could apply your styles to the list's parent element and target the second numbering level using the child combinator (>):
.list-parent > ol > li > ol {
padding-left: 0;
}
.list-parent ol {
counter-reset: item
}
.list-parent li {
display: block
}
.list-parent li:before {
content: counters(item, ".") " ";
counter-increment: item
}
<div class="list-parent">
<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>
This would be the best approach concerning maintainability as well, as applying global styles to every <ol> list on your website would only result in unwanted behavior sooner or later.
Here is an easy solution:
(See the comments in the code)
ol {
counter-reset: item;
padding-left: 0; /* Remove the padding of all ol elements */
}
ol ol ol {
padding-left: 1em; /* Set the padding of third level ol elements */
}
li {
display: block;
}
li:before {
content: counters(item, ".") " ";
counter-increment: item;
}
<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>
Hope it helps.
How to increment ordered list with numbers and alphabet letters in CSS:
ol.nested {
margin-bottom: 0;
counter-reset: item;
}
ol.nested li {
display: block;
position: relative;
}
ol.nested li:before {
content: counters(item, ".", decimal) ".";
counter-increment: item;
position: absolute;
margin-right:100%;
right: 10px;
}
<ol class="nested">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ol class="nested">
<li>Show Item 3.a instead of 3.1</li>
<li>Show Item 3.b instead of 3.2</li>
<li>Show Item 3.c instead of 3.3</li>
</ol>
</li>
<li>Item 4
<ol class="nested">
<li>Show Item 4.a instead of 4.1</li>
<li>Show Item 4.b instead of 4.2</li>
<li>Show Item 4.c instead of 4.3</li>
</ol>
</li>
<li>Item 5</li>
</ol>
Is there a way to combine numbers with letters (2.a, 2.b, 2.c) and increment them in ordered list? With content and counters-increment the list will be incremented only with one type either decimal or lower-alpha. How to combine decimal with lower-alpha incrementing? Thank you!
you can use multiple counters with multiple counter-reset, and apply a counter-increment to ::before and ::after
.nested {
margin-bottom: 0;
counter-reset: number letter; /* default reset for number and letter */
}
.nested.third li {
counter-reset: number 2; /* reset all child li in order to keep 3.x */
}
.nested.fourth {
counter-reset: letter /* reset the letter to restart at A */
}
.nested.fourth li {
counter-reset: number 3; /* reset all child li in order to keep 4.x */
}
.nested li {
display: block;
position: relative;
}
.parent li::before {
content: counter(number)".";
counter-increment: number; /* increment the numbers in general */
position: absolute;
margin-right: 100%;
right: 20px;
background: lightgreen
}
.child li::after {
content: counter(letter, lower-alpha); /* increment the letters in general */
counter-increment: letter;
position: absolute;
margin-right: 100%;
right: 10px;
background: lightblue;
width: 10px
}
<ol class="nested parent">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ol class="nested child third">
<li>Show Item 3.a instead of 3.1</li>
<li>Show Item 3.b instead of 3.2</li>
<li>Show Item 3.c instead of 3.3</li>
</ol>
</li>
<li>Item 4
<ol class="nested child fourth">
<li>Show Item 4.a instead of 4.1</li>
<li>Show Item 4.b instead of 4.2</li>
<li>Show Item 4.c instead of 4.3</li>
</ol>
</li>
<li>Item 5</li>
</ol>
OP's comment
Sorry, you're right. The numbers are exactly as I asked. Is there no way to have generic css class for the next items 5, 6, 7 and
so on? Hm.
As #Mr Lister answered below you can do it, so I'm updating my answer to meet your specs.
As you can see by the colors, the difference from one snippet to another is that in the first one you have more control over each item, in this one is more general.
.nested li {
display: block;
position: relative;
}
.nested {
margin-bottom: 0;
counter-reset: number;
}
.parent .nested {
counter-reset: letter;
}
.parent .nested li::before {
content: counter(number) "." counter(letter, lower-alpha);
counter-increment: letter;
background: lightblue
}
.nested li::before {
content: counter(number) ".";
counter-increment: number;
position: absolute;
margin-right: 100%;
right: 10px;
background: lightgreen
}
<ol class="nested parent">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ol class="nested">
<li>Show Item 3.a instead of 3.1</li>
<li>Show Item 3.b instead of 3.2</li>
<li>Show Item 3.c instead of 3.3</li>
</ol>
</li>
<li>Item 4
<ol class="nested">
<li>Show Item 4.a instead of 4.1</li>
<li>Show Item 4.b instead of 4.2</li>
<li>Show Item 4.c instead of 4.3</li>
</ol>
</li>
<li>Item 5</li>
</ol>
Is this what you need? It doesn't rely on any specific class names for the different nested lists, so you can have as many lists as you want.
The trick is to use items for the outer list and subitems for the inner ones.
ol.nested {
margin-bottom: 0;
counter-reset: item;
}
ol.nested li {
display: block;
position: relative;
}
ol.nested li:before {
content: counters(item, ".", decimal) ".";
counter-increment: item;
position: absolute;
margin-right: 100%;
right: 10px;
}
.nested .nested {
counter-reset: subitem;
}
.nested .nested li:before {
content: counter(item) "." counter(subitem, lower-alpha);
counter-increment: subitem;
}
<ol class="nested">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ol class="nested">
<li>Show Item 3.a instead of 3.1</li>
<li>Show Item 3.b instead of 3.2</li>
<li>Show Item 3.c instead of 3.3</li>
</ol>
</li>
<li>Item 4
<ol class="nested">
<li>Show Item 4.a instead of 4.1</li>
<li>Show Item 4.b instead of 4.2</li>
<li>Show Item 4.c instead of 4.3</li>
</ol>
</li>
<li>Item 5</li>
</ol>
Background
The Tinymce editor supports nested numbered lists. Naturally something like this is possible with the editor,
Now the requirement is to show numbers like this,
So far
This is doable by modifying the stylesheet associated with the editor with following list styles (from this answer)
ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }
Question
Now the issue is if I select some other number format (for example lower Greek from the editor it looks like following)
how do I get the nested lists also to use the same format as the parent list?
This is the solution for the problem,
ol {
counter-reset: item
}
ol li {
display: block
}
ol li:before {
content: counters(item, ".") ". ";
counter-increment: item
}
ol[style*="list-style-type: lower-alpha;"] li:before {
content: counters(item, ".", lower-alpha) ". ";
counter-increment: item
}
<ol>
<li>Level 1</li>
<li>Level 1
<ol>
<li>Level 2</li>
<li>Level 2</li>
<li>Level 2
<ol>
<li>Level 3</li>
<li>Level 3</li>
<li>Level 3
<ol>
<li>Level 4</li>
<li>Level 4</li>
<li>Level 4</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
<li>Level 1</li>
<li>Level 1</li>
</ol>