title: nth-child() selector working only on select few elements
body: <p>I have the following markup:</p>
  <pre><code>&lt;div class=&quot;heading-container&quot;&gt;
          &lt;p class=&quot;stroke&quot;&gt;Who we&lt;/p&gt;
          &lt;h2 class=&quot;section-title extreme-bold&quot;&gt;Contact us&lt;/h2&gt;
          &lt;p class=&quot;stroke&quot;&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Now I can select the 1st .stroke using the following selector:</p>
  <pre><code>.heading-container .stroke:nth-child(1){
      max-width: 200px;
  }
  </code></pre>
  <p>but the The following does't work for the 2nd stroke class:</p>
  <pre><code>.heading-container .stroke:nth-child(2){
      max-width: 200px;
  }
  </code></pre>
  <p>but the following again works:</p>
  <pre><code>.heading-container .stroke:nth-child(3){
      max-width: 200px;
  }
  </code></pre>
  <p>Now why does the value 3 work for the 2nd nth-child slection?</p>
  <p>For the 2nd nth-child is't the followig suppose to be appropriate:</p>
  <pre><code>.heading-container .stroke:nth-child(2){
      max-width: 200px;
  }
  </code></pre>