CODEWITHSUNDEEP
htmlcsshtml-lists
Thanos Darkadakis
Thanos Darkadakis

Reputation: 1729

Ordered list with repeated numbers

If i write the following HTML code:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Rice</li>
  <li>Bread</li>
</ol>

I will get

1. Coffee
2. Tea
3. Milk
4. Rice
5. Bread

What code should i write if I want to have the following result:

1. Coffee
2. Tea
2. Milk
4. Rice
5. Bread

Something like this would be ok:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li class="same_number_as_previous">Milk</li>
  <li>Rice</li>
  <li>Bread</li>
</ol>

Upvotes: 2

Views: 688

Answers (2)

Salman Arshad
Salman Arshad

Reputation: 272106

Ditch the stock counter and use a custom CSS2 Counter:

ol {
  counter-reset: foo 0;
  list-style-type: none;
}
ol li {
  counter-increment: foo 1;
}
ol li.dont-increment {
  counter-increment: foo 0;
}
ol li:before {
  content: counter(foo) ".";
  /* bells and whistles */
  float: left;
  width: 2em;
  margin-left: -2.5em;
  text-align: right;
}
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li class="dont-increment">Milk</li>
  <li>Rice</li>
  <li>Bread</li>
</ol>

Upvotes: 4

Pradyumna Swain
Pradyumna Swain

Reputation: 1138

Is it fine?

ol {
    
    margin: 0;
}
<ol>
  <li>Coffee</li>
  <li>Tea</li>
</ol>
<ol start=2>
<li>Milk</li>
  </ol>
  <ol start=4>
  <li>Rice</li>
  <li>Bread</li>
    </ol>

Upvotes: 1

Related Questions