title: CSS counter output mismatch
body: <p>Could someone please explain why in the <code>section</code> counter value is printed 0 in all <code>h2</code> tags?</p>
  
  <p>Here is the source code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  body {
      counter-reset: section;
      counter-reset: subsection;
  }
  
  h1::before {
      counter-increment: section;
      content: "Section " counter(section) ". ";
  }
  
  h2::before {
      counter-increment: subsection;
      content: counter(section) "." counter(subsection) " ";
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h1&gt;HTML tutorials:&lt;/h1&gt;
  &lt;h2&gt;HTML Tutorial&lt;/h2&gt;
  &lt;h2&gt;CSS Tutorial&lt;/h2&gt;
  
  &lt;h1&gt;Scripting tutorials:&lt;/h1&gt;
  &lt;h2&gt;JavaScript&lt;/h2&gt;
  &lt;h2&gt;VBScript&lt;/h2&gt;
  
  &lt;h1&gt;XML tutorials:&lt;/h1&gt;
  &lt;h2&gt;XML&lt;/h2&gt;
  &lt;h2&gt;XSL&lt;/h2&gt;
  
  &lt;p&gt;&lt;b&gt;Note:&lt;/b&gt; IE8 supports these properties only if a !DOCTYPE is specified.&lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>