title: CSS counter span element behaviour
body: <p>I am trying to get the hang of CSS counters but seems like I am not able to make sense of it. </p>
  
  <p>Here is a minimal example I hava:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  body {
      counter-reset: chapter;
      counter-reset: section;
      counter-reset: theorem;
  }
  
  .outline-1 {
      counter-increment: chapter ;
  }
  
  span[class^="section-number"] {
      counter-increment: section ;
  }
  .theorem:before {
      counter-increment: theorem;
      content: "Theorem " counter(chapter) "." counter(section) "." counter(theorem) ": ";
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="outline-container-sec-1-2" class="outline-1"&gt;
  &lt;h3 id="sec-1-2"&gt;&lt;span class="section-number-1"&gt;1.2&lt;/span&gt; Basic&lt;/h3&gt;
  &lt;div class="theorem"&gt; Very important theorem! &lt;/div&gt;&lt;/div&gt;
  
  &lt;div id="outline-container-sec-1-2" class="outline-1"&gt;
  &lt;h3 id="sec-1-2"&gt;&lt;span class="section-number-2"&gt;1.2&lt;/span&gt; Some  Combinatorics&lt;/h3&gt;
  &lt;div class="theorem"&gt; Very important theorem! &lt;/div&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The result I get is:</p>
  
  <p>1.1 Basic</p>
  
  <p>Theorem 1.0.1: Very important theorem!</p>
  
  <p>1.2 Some Combinatorics</p>
  
  <p>Theorem 2.0.2:Very important theorem!</p>
  
  <p>Why the second counter stays at 0? Why can I count the span elements?</p>