Reputation: 3918
Here's the problem:
I have an ol li
ordered list with a start
attribute like so:
.custom {
margin: 0;
padding: 0;
list-style-type: none;
}
.custom li {
counter-increment: step-counter;
margin-bottom: 10px;
}
.custom li::before {
content: counter(step-counter);
margin-right: 5px;
font-size: 80%;
background-color: rgb(0,200,200);
color: white;
font-weight: bold;
padding: 3px 8px;
border-radius: 3px;
}
<ol start="6" class="custom">
<li>This is the sixth item</li>
<li>This is the seventh item</li>
<li>This is the eighth item</li>
<li>This is the ninth item</li>
<li>This is the tenth item</li>
</ol>
I get the following output on the browser:
Is it possible to serialize the list-style
numbering on an ordered list using the value in start
attribute instead of 1
? No JavaScript can be used for this though.
Upvotes: 5
Views: 2567
Reputation: 2835
Here is my jank solution.
Prepend with js x li's at the beginning of the ol. Then hide them by positionning them absolute and throwing them to the moon.
$('ol[start]').each(function(){
var start = $(this).attr('start');
//console.log(start);
for(var i=1;i<start;i++){
$(this).prepend('<li class="hidden"></li>');
}
})
ol{
counter-reset: items;
padding:0;
padding-left: 46px;
}
ol li {
display: block;
counter-increment: items;
text-indent: -22px;
margin-bottom: 25px;
}
ol li.hidden{
visibility:hidden;
position:absolute;
left:-999vw;
}
ol li:before {
content: "0" counter(items)". ";
color:green;
display:inline-block;
width:22px;
font-size:14px;
}
ol li:nth-child(n+10):before {
content: "" counter(items)". ";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol start="4">
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ol>
Upvotes: 0
Reputation: 273458
You can simulate this using CSS variable that you set instead of start
and use it to reset the counter. For semantic purpose you can also keep start
attribute.
.custom {
margin: 0;
padding: 0;
list-style-type: none;
counter-reset: step-counter calc(var(--start) - 1);
}
.custom li {
counter-increment: step-counter;
margin-bottom: 10px;
}
.custom li::before {
content: counter(step-counter);
margin-right: 5px;
font-size: 80%;
background-color: rgb(0, 200, 200);
color: white;
font-weight: bold;
padding: 3px 8px;
border-radius: 3px;
}
<ol style="--start:6" start="6" class="custom">
<li>This is the sixth item</li>
<li>This is the seventh item</li>
<li>This is the eighth item</li>
<li>This is the ninth item</li>
<li>This is the tenth item</li>
</ol>
Upvotes: 7
Reputation: 33054
I've added a few rules to your CSS. The most important is this:
.custom{counter-reset:start 5;}
This will make the list to start at 5+1 = 6
.custom {
margin: 0;
padding: 0;
list-style-type: none;
counter-reset:start 5;/*This*/
}
.custom li {
counter-increment: step-counter;
margin-bottom: 10px;
counter-increment: start;/*This*/
}
.custom li::before {
content:counter(start);/*This*/
margin-right: 5px;
font-size: 80%;
background-color: rgb(0,200,200);
color: white;
font-weight: bold;
padding: 3px 8px;
border-radius: 3px;
}
<ol class="custom">
<li>This is the sixth item</li>
<li>This is the seventh item</li>
<li>This is the eighth item</li>
<li>This is the ninth item</li>
<li>This is the tenth item</li>
</ol>
Upvotes: 1
Reputation: 5158
li tag have no access to parent attribute.
This is the best way i saw, using content: attr()
.custom {
margin: 0;
padding: 0;
list-style-type: none;
}
.custom li {
counter-increment: step-counter;
margin-bottom: 10px;
}
.custom li::before {
content: attr(data-idx);
margin-right: 5px;
font-size: 80%;
background-color: rgb(0,200,200);
color: white;
font-weight: bold;
padding: 3px 8px;
border-radius: 3px;
}
<ol class="custom">
<li data-idx="6">This is the sixth item</li>
<li data-idx="7">This is the seventh item</li>
<li data-idx="8">This is the eighth item</li>
<li data-idx="9">This is the ninth item</li>
<li data-idx="10">This is the tenth item</li>
</ol>
Upvotes: 1