Counter-reset on pseudo class creates new counter-scope

Hi all

I was trying nested counters when I came across this strange behavior.

Demo: http://nimbupani.com/demo/nested-counter.html

The behavior is, when I use this in CSS:

  
  ol {
   list-style-type:none;
   counter-reset:section;            
  }
  
   ol li {
   counter-increment: section;
  }                              

  ol li:nth-child(4n)  
   {
   counter-reset:section;
  }
  
  ol li:before {                         
   content: counter(section)" ";
  }
  
  ol li li:before {                         
   content: counters(section, " ")" ";
  }

The nested element seems to create another counter named section which
has scope for only nth-child pseudo-class (even though they are only
resetting the counter named section). While this seems consistent with
the Candidate Recommendation [2], each browser seems to interpret this
differently. Chrome/Safari/Opera (latest versions) resets that counter
to 1. Firefox resets that to the last number before the counter is
reset.

The counter-reset set on classes/pseudo-classes is creating a new
scope even though they are overriding the counter-increment specified
on the same element. I think this behavior is incorrect (even though
valid according to the spec).

Regards,
Divya

[2] http://www.w3.org/TR/CSS2/generate.html

Received on Monday, 4 January 2010 17:21:23 UTC