title: CSS nth-child: How will nth-child will work even inside a container
body: <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt; 
  .zebra:nth-child(odd) {
      background: red;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;p class="zebra"&gt;Paragraph&lt;/p&gt;
  &lt;p class="zebra"&gt;Paragraph&lt;/p&gt;
  &lt;p class="zebra"&gt;Paragraph&lt;/p&gt;
  
  &lt;div&gt;
    &lt;p class="zebra"&gt;Paragraph Inside&lt;/p&gt;
    &lt;p class="zebra"&gt;Paragraph Inside&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;p class="zebra"&gt;Paragraph&lt;/p&gt;
  &lt;p class="zebra"&gt;Paragraph&lt;/p&gt;
  &lt;p class="zebra"&gt;Paragraph&lt;/p&gt;
  
  &lt;div&gt;
    &lt;p class="zebra"&gt;Paragraph Inside&lt;/p&gt;
    &lt;p class="zebra"&gt;Paragraph Inside&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;p class="zebra"&gt;Paragraph&lt;/p&gt;
  &lt;p class="zebra"&gt;Paragraph&lt;/p&gt;
  &lt;p class="zebra"&gt;Paragraph&lt;/p&gt;
  
  &lt;p&gt;&lt;b&gt;Note:&lt;/b&gt; Internet Explorer 8 and earlier versions do not support the :nth-child() selector.&lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have a series of paragraph above with <code>zebra</code> class but nth-child Resets when Wrap inside a container. Is it possible that it does not resets even inside a container? </p>
  
  <p><strong>ACTUAL RESULT:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/6JHZD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6JHZD.png" alt="Result of above code"></a></p>
  
  <p><strong>EXPECTED RESULT</strong></p>
  
  <p><a href="https://i.stack.imgur.com/Ja5M7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ja5M7.png" alt="Expected Result"></a></p>
  
  <p>w3schools link: <a href="https://www.w3schools.com/code/tryit.asp?filename=FPLP7CUMGSPD" rel="nofollow noreferrer">https://www.w3schools.com/code/tryit.asp?filename=FPLP7CUMGSPD</a></p>