CSS counter-reset on nested list

Question

I\'m struggling with counter-reset when ol is in div. Red list in the snippet numbering should be:

1, 2, 3

not:

Answer 1

One way to work this around would be to add a class (since you cannot select an element based on what is its parent), and exclude it from initial selection with :not pseudo-class:

HTML:

    
BBD
    
BBD
        

            
BBD
            
BBD
            
BBD
        
    
    
BBD



    
BBD
    
BBD
    
BBD



    

        
BBD
        
BBD
        
BBD
    
   

CSS:

ol:not(.x) {
    counter-reset: item;
    list-style: none;
}
ol:not(.x) li:before {
    counter-increment: item;
    content: counters(item, ".")" ";
}   

as per this JSFiddle