How can I reset a CSS-counter to the start-attribute of the given list

Question

I am using a self-styled, numbered list. How can I read the start-attribute and add it to the counter with CSS?

HTML

<ol>
    <li>Number One</li>
    <li>Number Two</li>
    <li>Number Three</li>
</ol>
<ol start="10">
    <li>Number Ten</li>
    <li>Number Eleven</li>
    <li>Number Twelve</li>
</ol>

CSS

ol {
    list-style-type: none;

    /* this does not work like I expected */
    counter-reset: lis attr(start, number, 0);

}
li {
    counter-increment: lis
}
li:before {
    content: counter(lis)". ";
    color: red;
}

FIDDLE

Answer 1

You may just use the attribute start as a filter :

ol[start="10"] {
   counter-reset: lis 9;
}

Demo , but this will only apply for this ol attribute. You would need some javaScript in order to retrieve attribute value to apply, generate the correct counter-reset.

---

<ins data-extra="Use of Scss">

see this : DEMO to generate 100 rules from these lines :

@for $i from 1 through 100 {
  .ol[start="#{$i}"] {
    counter-reset: lis $i ;
  }
}

Then just copy paste the rules generated if Scss is not avalaible on your hosting .

</in>

---

<ins data-extra="jQueryFix">:

A jQuery solution can be easily set up : DEMO

$( "ol" ).each(function() {
  var   val=1;
    if ( $(this).attr("start")){
  val =  $(this).attr("start");
    }
  val=val-1;
 val= 'lis '+ val;
$(this ).css('counter-increment',val );
});

Notice that : $(this ).css('counter-reset',val ); works too :)

.</ins>