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>
Related
Edit: Down-vote message received (I should have made and posted some attempt at solving the problem), lesson learned, so I'd appreciate not being down-voted any more....
A friend asked me to do a simple web page for them and I'm stumped at one thing -- I want to do an ordered list within an ordered list, like this:
1. something
2. something else
3. something different
3a. and a sub thing
3b. and another sub thing
But the sub list has to have custom strings as its 'numbers'. I can figure out to have just letters, but not numbers and letters.
That's it, but after 30 minutes of googling and being perplexed at counter-increment and counter-reset, I'm wondering if there is a simple way to do this?
Any help much appreciated1
You could work with 2 counters, one for letters & one for numbers.
ul{
padding:0;
list-style-type: none;
}
.root {
counter-reset: numbers;
}
.root > li::before {
counter-increment: numbers;
content: counter(numbers) ". ";
}
.root ul {
padding-left: 15px;
counter-reset: letters;
}
.root ul > li::before {
counter-increment: letters;
content: counter(numbers) counter(letters, lower-alpha) ". ";
}
<ul class="root">
<li>item</li>
<li>item</li>
<li>item
<ul>
<li>sub-item</li>
<li>sub-item</li>
<li>sub-item</li>
</ul>
</li>
<li>item</li>
<li>item
<ul>
<li>sub-item</li>
<li>sub-item</li>
<li>sub-item</li>
</ul>
</li>
<li>item</li>
<li>item</li>
<li>item
<ul>
<li>sub-item</li>
<li>sub-item</li>
<li>sub-item</li>
</ul>
</li>
</ul>
With SASS:
ul{
padding:0;
list-style-type: none;
}
.root {
counter-reset: numbers;
> li::before {
counter-increment: numbers;
content: counter(numbers) ". ";
}
ul {
padding-left: 15px;
counter-reset: letters;
> li::before {
counter-increment: letters;
content: counter(numbers) counter(letters, lower-alpha) ". ";
}
}
}
This will do the trick. Note that this is static HTML, you'll have to manually add the number and it is not in any way an automated solution.
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: letter-counter;
}
ul {
list-style-type: none;
}
li li::before {
counter-increment: letter-counter;
content: "3" counter(letter-counter, lower-alpha) ". ";
}
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item</li>
<li>item
<ul><li>sub-item</li>
<li>sub-item</li>
<li>sub-item</li></ul></li>
</ol>
</body>
</html>
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>
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>
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