Is it possible to continue the numbering in separate ul / ol blocks with css?
1 2 3 4 5 6 ....
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
<ol>
<li>item</li>
<li>item</li>
</ol>
Maybe you could use this property?
https://css-tricks.com/almanac/properties/c/counter-increment/
Something like this, you could modify it onto the ordered list only, use counter-increment.
More info of the usage here:
https://developer.mozilla.org/en/docs/Web/CSS/counter-increment
Use this:
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
// use start number you want as below
<ol start="50">
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
Related
It not usual to do so, but we are getting an unordered list from an external tool and have to deal with it. This is why I am asking here.
I need the ul to behave like an ol.
It's easy to say, list-style-type="decimal".
But I would need to have the START parameter as well.
If that is not possible to have in an easy way I would have to build something completly independant, aka
<li>
<span>1.</span>
<p>Text</p>
</li>
I would really like to avoid that, so my question is:
Is it possible to use an ul as an ol including the start value?
<ul start="17">
You can use CSS Counters and define a starting point in the counter-reset` CSS.
ul.my-list {
list-style: none;
counter-reset: item 17;
/* number should always be 1 LESS than your required starting number */
}
.my-list li::before {
counter-increment: item;
content: counters(item, ".") ". ";
}
<ul class="my-list">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
It should be easy to handle for a user on the other side of the desk. He should have a tool where he defines e.g. <list start="17"> That's it. He should not handle with css or whatever.
That being the case, this Q&A may offer a solution..the user merely has to apply a style="--start-xx"; inline style and CSS Custom properties can handle the rest.
ul.my-list {
list-style: none;
counter-reset: item calc(var(--start) - 1)
}
.my-list li::before {
counter-increment: item;
content: counters(item, ".") ". ";
}
<ul class="my-list" style="--start:21">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul class="my-list" style="--start:10">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
I need to apply style only to the elements that has the class "red". How do I avoid applying the class to all children town the stream?
.red {
color: red
}
<ul>
<li>item</li>
<li class="red">item
<ul>
<li>item</li>
<li class="red">item</li>
<li>item</li>
</ul>
</li>
</ul>
Apply CSS to all immediate children of .red using > *. Reset color to initial to ignore any previous styling (from the element's parents).
.red {
color: red
}
.red > * {
color: initial;
}
<ul>
<li>item</li>
<li class="red">item
<ul>
<li>item</li>
<li class="red">item</li>
<li>item</li>
</ul>
</li>
</ul>
If you have control of your HTML, consider inserting an element containing only the text you want styled. For example:
<ul>
<li>item</li>
<li><em class="red">item</em>
<ul>
<li>item</li>
<li><em class="red">item</em></li>
<li>item</li>
</ul>
</li>
</ul>
In your original document, the nested ul is part of the li with a class of red. This means that the red styling will take effect as well. This may allow for less complex CSS and greater semantics in the HTML document.
I've seen that you can use various types of counters, as described in the accepted answer to this question: CSS Pseudo Element Counters: can you increment an alphabet letter "a", "b", "c", etc instead of a number?
However, is it possible to increment by a float, e.g. 0.5? This would give a list of, say, 3.0, 3.5, 4.0, 4.5, etc.
Here is what I've tried to do, to no avail:
.values li:before {
content: counter(step);
counter-increment: step 0.5;
}
The value after step is not recognized if it's a float (only if integer).
If this is not possible, is there another method I could use to programmatically set the <li> elements as desired?
Thank you.
You can fake it with multiple rules and nth-child etc
ul {
counter-reset: numbers;
list-style-type: none;
}
li:before {
padding-right: 1em;
}
li:nth-of-type(2n+1)::before {
counter-increment: numbers;
}
li:nth-child(odd)::before {
content: counters(numbers, "") ".0";
}
li:nth-child(even)::before {
content: counters(numbers, "") ".5";
}
<ul>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
</ul>
CSS probably isn't the best thing you can use for this. Try using JavaScript:
var children = document.getElementById("values").children;
var value = 1;
for(var i = 0; i < children.length; i++) {
var child = children[i];
child.innerHTML = value + " " + child.innerHTML;
value += 0.5;
}
<ul id="values">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
You can do it without any hacks, CSS supports this feature. You need to add few counters to content value.
ol {
counter-reset: section;
list-style-type: none;
counter-reset: subsection;
counter-increment: section;
}
li::before {
counter-increment: subsection 5;
content: counter(section) "." counter(subsection) " ";
}
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
If I wanted to select every 4th element starting at the 5th spot I would do:
.elem:nth-child(4n+5) {
//something
}
But how to do it for every odd element starting at the 5th spot? This syntax doesn't work:
.elem:nth-child(:oddn+5) {
//something
}
You could use .elem:nth-child(2n+5)
li:nth-child(2n+5) {
color: red
}
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
The 2n will select every other element and the +5 acts as the offset. So with n starting at zero, you get 5, 7, 9, 11, ...
You can use
:nth-child(odd) to select every odd element
:not(:nth-child(-n + 4)) to not select first 4 elements
div:not(:nth-child(-n + 4)):nth-child(odd) {
background: red;
}
<div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div>
Or if you want to start from 5th element you can change to this
div:not(:nth-child(-n + 5)):nth-child(even) {
background: red;
}
<div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div>
Is it possible to display only decimal numbers and not the whole numbers at the top level of an ordered list outline? For example:
<ol>
<li>Item
<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
</li>
<li>Item
<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
</li>
<li>Item</li>
<li>Item</li>
CSS
ol {
counter-reset: section;
list-style-type: none;
}
li:before {
counter-increment: section;
content: counters(section,".") " ";
}
That would display a list like:
Item
1.1 Item
1.2 Item
1.3 Item
What I would like to achieve is:
Item
1.1 Item
1.2 Item
1.3 Item
Here is a fiddle I've been trying things out with:
http://jsfiddle.net/Py7k8/
ol {
counter-reset: section;
list-style-type: none;
}
li:before {
counter-increment: section;
content: "";
}
li ol li:before {
content: counters(section,".") " ";
}
DEMO