title: How to properly apply CSS style to H elements in ordered list
body: <p>I have this small problem, I am building a nested ordered list, and I want to be able to customize the styles of top level elements (note that bold is both on the counter and text).</p>
  
  <blockquote>
    <p><strong>1. AAA</strong></p>
    
    <p>1.1 Lorem ipsum</p>
    
    <p>1.2 Lorem ipsum</p>
    
    <p>1.3 Lorem ipsum</p>
    
    <p><strong>2. BBB</strong></p>
    
    <p>2.1 Lorem ipsum</p>
    
    <p>2.2 Lorem ipsum</p>
    
    <p>2.3 Lorem ipsum</p>
  </blockquote>
  
  <p>The problem I have encountered is that if I apply any <code>&lt;h&gt;</code> tag for the top level elements of the list, the counter breaks. </p>
  
  <p>Without the <code>&lt;h3&gt;</code> tags counters work properly, but without  <code>&lt;h3&gt;</code> I am unable to style top level elements of the list. </p>
  
  <p>How can I get both working counter and styled top level elements?</p>
  
  <p>Sample here: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#test li {
    font-size: 16px;
    padding: 2px 0;
    display: block;
    margin-left: 10px
  }
  
  #test h3 {
    display: inline-block;
    padding: 0 0 5px 0;
  }
  
  #test ol, ul {
    list-style-type: decimal;
  }
  
  #test li:before {
    content: counters(item, ".") " ";
    counter-increment: item
  }
  
  #test ol {
    counter-reset: item;
    margin: 0
  }
  
  #test h3&gt;li {
    font-size: 26px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div id="test"&gt;
      
      &lt;ol&gt;
         
      &lt;h3&gt;&lt;li&gt;AAAA&lt;/h3&gt;
      &lt;ol&gt;
      &lt;li&gt;&lt;a href=”#”&gt;Lorem ipsum.&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=”#”&gt;Lorem ipsum.&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=”#”&gt;Lorem ipsum.&lt;/a&gt;&lt;/li&gt;
      &lt;/ol&gt;
      &lt;/li&gt;
      
          
      &lt;h3&gt;&lt;li&gt;BBBB&lt;/h3&gt;
      &lt;ol&gt;
      &lt;li&gt;&lt;a href=”#”&gt;Lorem ipsum.&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=”#”&gt;Lorem ipsum.&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=”#”&gt;Lorem ipsum.&lt;/a&gt;&lt;/li&gt;
      &lt;/ol&gt;
      &lt;/li&gt;
      
      &lt;h3&gt;&lt;li&gt;CCCC&lt;/h3&gt;
      &lt;ol&gt;
      &lt;li&gt;&lt;a href=”#”&gt;Lorem ipsum.&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=”#”&gt;Lorem ipsum.&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=”#”&gt;Lorem ipsum.&lt;/a&gt;&lt;/li&gt;
      &lt;/ol&gt;
      &lt;/li&gt;
      
      &lt;/ol&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>