Marvin Danig
Marvin Danig

Reputation: 3918

Can I style numbering an ordered list that has a start attribute value?

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:

List with 5 items; the first one has the number 1, but should have number 6

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

Answers (4)

Fredy31
Fredy31

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

Temani Afif
Temani Afif

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

enxaneta
enxaneta

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

Arthur
Arthur

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

Related Questions