I want to have multiple "ol" lists where the counter value does not reset between lists. Another way to say this is that I want the counter for the first "li" in the second list to be one higher than the counter value from the last element of the previous list. Is there some CSS magic that will do this?
How to use CSS counters in lists without resetting the counters?
Asked Answered
While Su's answer would work, you don't need to be so heavy-handed. Just reset the counter at the top, and everywhere you use it, it will increment.
body {
counter-reset: item;
}
li {
display: block;
}
li:before {
display: inline-block;
content: counter(item) ". ";
counter-increment: item;
}
see this example
Not quite with just CSS. It does provide you with some control over counters (and support is pretty good), but it's still static in it's behavior. So this works:
<html>
<head>
<style>
#list-one {
counter-reset : item;
}
#list-two {
counter-reset : item 3;
}
li {
display : block;
}
li:before {
display : inline-block;
content : counter(item) ". ";
counter-increment : item;
}
</style>
</head>
<body>
<ol id="list-one">
<li>One</li><li>Two</li><li>Three</li>
</ol>
<ol id="list-two">
<li>Four</li><li>Five</li><li>Six</li>
</ol>
</body>
</html>
…but you can't just drop two lists after each other and have the second one automatically pick up where the other left off(see the "3" in the second CSS rule). With a little creativity, though, you could probably wrap the counter-reset styling with a bit of PHP or whatever you're using to build your site. This is dependent upon the particulars of your situation, of course.
To create a counter in CSS that continues counting without stopping at the end of an , and have that counter be used as the list item marker, use the following CSS:
/* create a counter on an element that contains your ordered lists. */
.container_of_continuous_count {
counter-reset: continuation;
}
/* increment the counter each time a list item is encountered within that container */
.container_of_continuous_count li {
counter-increment: continuation;
}
/* replace the contents of the marker on each list item with the current value of the counter, but add a period and a space */
.container_of_continuous_count ::marker {
content: counter(continuation) ". ";
}
© 2022 - 2024 — McMap. All rights reserved.