title: nth-child only selecting first element
body: <p>I have the following code that I want to select a specific <code>class=title</code> using <code>nth-child</code> but it does seem to work</p>
  
  <pre><code>&lt;div class="block"&gt;
     &lt;div class="title"&gt;&lt;/div&gt; &lt;!-- first title here !--&gt;
     &lt;div class="item"&gt;&lt;/div&gt;
     &lt;div class="item"&gt;&lt;/div&gt;
     &lt;div class="item"&gt;&lt;/div&gt;
     &lt;div class="title"&gt;&lt;/div&gt; &lt;!-- second title here !--&gt;
     &lt;div class="item"&gt;&lt;/div&gt;
     &lt;div class="title"&gt;&lt;/div&gt; &lt;!-- third title here !--&gt;
     &lt;div class="item"&gt;&lt;/div&gt; 
     &lt;div class="item"&gt;&lt;/div&gt;
     &lt;div class="item"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Test 1</strong> </p>
  
  <pre><code>.title:nth-child(3){
     background-color: red;
   } 
  </code></pre>
  
  <p>Expected result <code>Third title highlighted</code> but the actual output is <code>no highlight is done</code></p>
  
  <p><strong>Test 2</strong></p>
  
  <pre><code>.title:nth-child(1){
     background-color: red;
   } 
  </code></pre>
  
  <p>Expected result <code>First title highlighted</code> The actual output is <code>first title is highlighted</code></p>
  
  <p>Am not sure why it won't work with the other child while it works with the first child only..</p>