Multiple CSS counters not working as expected

Question

I am trying to create multiple levels of counters in a html table, but this is not working as I expected. The first counter works ok, but the next counters do not work. Some

Answer 1

CSS is designed to take advantage of the hierarchical nature of HTML, hence the "cascading" style sheets. The element structure of your table is linear and as such defeats the efficiency of the cascade. I understand that there are circumstances when you might not have control over the HTML structure of the document in which case a CSS kluge might be in order. Otherwise, I would suggest restructuring your elements to match the same hierarchy of the layout you're trying to achieve. MUCH simpler and more scalable code.

HTML:

 

  
Step 1
  
Step 2
    

      
Risk 1
      
Risk 2
    
  
  
Step 3
    

      
Risk 3
    
  
  
Step 4
    
  
      
Risk 4
      
Risk 5
        
  
          
Measure 1
          
Measure 2
          
Measure 3
          
Measure 4
        
      
Risk 6
      
Risk 7
    
  

CSS:

ul{
  list-style-type: none;
  counter-reset: foo;
}
li:before{
  counter-increment: foo;
  content: counters(foo,".") ". ";
}

Demo