title: How do I stop <div> tags interfering with counters?
body: <p>In the code below, I need to use the <code>div</code> tag at the top of the HTML for styling. Without the <code>div</code> tag in place, the <code>hx</code> tags are outline numbered correctly, but with the <code>div</code> in place everything goes completely wrong. I need <a href="http://codepen.io/anon/pen/rVqEpX" rel="noreferrer" title="non-working example with div">this</a> to work like <a href="http://codepen.io/anon/pen/KpGjRb" rel="noreferrer" title="working example without div">this</a>, but with the <code>div</code> tag still in place, and I need it to work for divs with different ids. Any ideas?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {counter-reset: h1}
  h1 {counter-reset: h2}
  h2 {counter-reset: h3}
  
  h1:before {counter-increment: h1; content: counter(h1) ". "}
  h2:before {counter-increment: h2; content: counter(h1) "." counter(h2) ". "}
  h3:before {counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". "}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="varies"&gt;
      &lt;h1&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/h1&gt;
  &lt;/div&gt;
  &lt;p&gt;Morbi efficitur nibh metus, a vehicula mauris tristique ac. Duis ornare metus eget iaculis hendrerit.&lt;/p&gt;
    &lt;h2&gt;Morbi nisi lacus, ultricies sit amet turpis a, aliquet congue nulla.&lt;/h2&gt;
          &lt;p&gt;Duis eget facilisis nisl.&lt;/p&gt;
      &lt;h3&gt;Donec tincidunt purus quam, ut accumsan lorem hendrerit a.&lt;/h3&gt;
        &lt;p&gt;Aenean in mattis quam.&lt;/p&gt;
      &lt;h3&gt;Maecenas a nulla sit amet ligula facilisis tincidunt lacinia non enim.&lt;/h3&gt;
        &lt;p&gt;Aliquam dignissim turpis placerat, facilisis magna et, venenatis purus.&lt;/p&gt;
    &lt;h2&gt;Suspendisse tempus eu elit nec malesuada.&lt;/h2&gt;
          &lt;p&gt;In ut sollicitudin nisi. Praesent non porttitor ante, molestie scelerisque mauris.&lt;/p&gt;
    &lt;h2&gt;Vivamus eu turpis efficitur, ornare risus in, consectetur tellus.&lt;/h2&gt;
          &lt;p&gt;Cras pellentesque orci eu placerat mollis.&lt;/p&gt;      
  &lt;h1&gt;Duis eu nulla et tellus porttitor auctor.&lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>