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

There are 2 problems here:

1. The direct parent of the first counted element should contain all the other counted elements. In your case, the first counted element is a td in a row, so its parent is a tr but all the other counted elements have their own parents of tr (which are siblings of the parent of the first counted element). So to fix this I think you have to set the class on the tr and count it there.

2. The counter-reset and counter-increment can be overridden, that means if at one tr, you need to use counter-reset and counter-increment for more than 1 counter variable, you need to put them on the same declaration (space-separated) for counter-reset and counter-increment.

From 2 points above, here is the code it should be:

HTML:

  

    

      
TaakStep
      
Risk
      
Measure
    
  
  
        
    

      
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
      
Measure 5
    
  

CSS:

  table.tasksteps {
      counter-reset: tasksteps;
  }      
  tr.taskstep {
      counter-reset: risks;
      counter-increment: tasksteps;
  }    
  tr.risk {          
      counter-reset: measures;
      counter-increment: risks;
  }
  tr.taskstep.risk {
      counter-reset: risks measures;
      counter-increment: tasksteps risks;
  }
  td.measure {
      counter-increment: measures;
  }

  td.taskstep:before {
      content: counter(tasksteps) '. ';
  }

  td.risk:before {
      content: counter(tasksteps) '.' counter(risks) '. ';
  }

  td.measure:before {
      content: counter(tasksteps) '.' counter(risks) '.' counter(measures) '. ';
  }    

Updated Demo.