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
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>
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>
Greetings everyone i have a problem with my separator:
#menu li:not(:first-child):before {
content: " | ";
}
this code works but first li item does not get separated like the others. Here's the result I get :
test1 test2 | test3 | test4
Cloud someone tell me how to solve this problem?
The first li is does not have the separator because of your selector which specifies that the style should not apply to the first <li>. If you want all of the <li> to have a separator, you should add this declaration to your css:
#menu li:first-child:after {
content: " | ";
}
I think that this is what you want, it works fine for :
(if it is not working, inspect your page to find if some css rules doesn't hide the before of the second li)
#menu {
list-style: none;
}
#menu li {
display: inline-block;
}
#menu li:not(:first-child):before {
content: " | ";
}
<ul id="menu">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
css amended:
But please see there is no difference so your css has to work
#menu li:after {
content: " | "; }
#menu li:last-child:after {
content: ""; }
#menu li {display: inline-block;}
<ul id="menu">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
But like the stackoverflow community is mentioning:
This should work:
#menu li:not(:first-child):before {
content: " | ";
}
#menu li {display: inline-block;}
<ul id="menu">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
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>