Change start number of an ordered list (ol)

Question

I would like to know how to start my ol with a different number, say 4. I have tried using start="4" and I have tried adding a class to the ol and setting counter-reset: 4; but none of this seems to work. The number doesn't change.

I have tried to remove all my stylings to put it right back to a plain ol list but it still doesn't work. Can someone please tell me where I am going wrong?

I just want the second list to have the number in the red circle start with 4.

JSFIDDLE

HTML

<div class="row">
                        <div class="col-md-6">
                             <ol class="number-circles">
                           <li value="7"><div class="ol-block"><div class="blue-heading">Title 1</div>
                              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
                           </li>
                            <li><div class="ol-block"><div class="blue-heading">Title 2</div>
                               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
                           </li>
                           <li><div class="ol-block"><div class="blue-heading">Title 3</div>
                               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
                           </li>

                        </ol>
                        </div>
                        <div class="col-md-6">
                             <ol class="number-circles four">

                            <li><div class="ol-block"><div class="blue-heading">Title 4</div>
                               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
                           </li>
                            <li><div class="ol-block"><div class="blue-heading">Title 5</div>
                               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
                           </li>
                        </ol>
                        </div>
                    </div>

CSS

.col-md-6 {

   float: left;
  width: 50%;

}
.number-circles {
  margin: 40px 0 0 0;
  padding: 0;
  list-style-type: none;
}

  .blue-heading {
      color: red;
      font-weight: 600;
      margin-bottom: 5px;
  }

  li {
  counter-increment: step-counter;
  margin-bottom: 40px;

}

 .number-circles li::before {
          content: counter(step-counter);
          margin-right: 15px;
          font-size: 17px;
          background-color: red;
          border: solid 6px yellow;
          color: white;
          font-weight: bold;
          border-radius: 50%;
          height: 40px;
          display: inline-block;
          width: 40px;
          height: 40px;
          padding: 2px 8px;
          text-align: center;
          float: left;
    }

   .ol-block {
        float: left;
        display: inline-block;
        width: 85%;
        margin-bottom: 20px;
    }



ol.four { counter-reset: item 2; }

Related - http://stackoverflow.com/questions/779016/is-it-possible-to-specify-a-starting-number-for-an-ordered-list — Paulie_D, Mar 01 '16 at 17:09
This doesn't work on my example though, I can't get it to work on my ol, I have tried that. — Jay, Mar 01 '16 at 17:10
Try simpifying the demo...at the moment it's hard to understand the issue. — Paulie_D, Mar 01 '16 at 17:13

score 1 · Accepted Answer · answered Mar 01 '16 at 17:10

You have list-style-type set to none on your ol.

.number-circles {
   margin: 40px 0 0 0;
   padding: 0;
   list-style-type: none;
}

The start attribute won't make a difference, because the value will be hidden.

list-style-type

The list-style-type property specifies the appearance of a list item element.

none

No item marker is shown.

_{source: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type}

bmich72 · Answer 2 · 2016-03-01T18:49:59.867

1

You don't have a counter named "item". You need to change:

ol.four {counter-reset: item 2}

to:

ol.four {counter-reset: step-counter 3}

The value of step-counter is 0 based so setting value to 3 will display 4

Check it out here - JSFiddle

edited Mar 01 '16 at 18:49

answered Mar 01 '16 at 18:16

bmich72

640
5
6

Change start number of an ordered list (ol)

2 Answers2