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>

Answer 2

I see that this is an old question, but I'm putting this here because it may come to help someone yet.

You cannot read an attribute in css counter properties. Instead, you could use inline css with counter-reset to define the starting number for a particular list.
(Yes, I know it is not a best practice to use inline css, but it can and should be used for edge cases like this one)

The first item increments the reset value by 1, so besides providing the counter name, you will need to subtract the number you want the list to start at by 1:

HTML

<ol>     <li>Number One</li>     <li>Number Two</li>     <li>Number Three</li> </ol>  <!-- NOTE: List numbering starts at counter-reset + 1 --> <ol style="counter-reset: lis 9;" start="10">     <li>Number Ten</li>     <li>Number Eleven</li>     <li>Number Twelve</li> </ol> 

CSS

ol {     list-style-type: none;     counter-reset: lis; /* Resets counter to zero unless overridden */ } li {     counter-increment: lis } li:before {     content: counter(lis)". ";     color: red; } 

FIDDLE (http://jsfiddle.net/hcWpp/308/)

[EDIT]: kept start attribute as suggested to address accessibility and progressive enhancement