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

    
Number          


        

Answer 1

Simply add:

ol:not(:nth-of-type(1)){
    counter-increment: lis 10;
}

Demo Fiddle

You cant use attr in counter-reset unfortunately, but you can add rules to alter the increment amount.

Alternative 1

If you are going to have multiple lists, a more resilient version would be:

ol {
    list-style-type: none;
    /* this does not work like I expected */
    counter-reset: lis;

}
ol:not(:first-of-type){
     counter-increment: ol
}
li {
    counter-increment: lis
}
li:before {
    content: counter(lis)". ";
    color: red;
}
ol:not(:first-of-type) li:before {
    content: counter(ol) counter(lis)". ";
    color: red;
}

Alternative 2

If the numerical prefix can be anything, the below will provision for this:

HTML

    
Number One
    
Number Two
    
Number Three


    
Number Ten
    
Number Eleven
    
Number Twelve


    
Number Ten
    
Number Eleven
    
Number Twelve

CSS

ol {
    list-style-type: none;
    counter-reset: lis;
}
li {
    counter-increment: lis
}
li:before {
    content: attr(data-prefix) counter(lis)". ";
    color: red;
}