title: How to select the first, second, or third element with a given class name?
body: <p>How can I select a certain element in a list of elements? I have the following:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="myclass"&gt;my text1&lt;/div&gt;
  &lt;!-- some other code follows --&gt;
  &lt;div&gt;
      &lt;p&gt;stuff&lt;/p&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;p&gt;more stuff&lt;/p&gt;
  &lt;/div&gt;
  &lt;p&gt;
      &lt;span&gt;Hello World&lt;/span&gt;
  &lt;/p&gt;
  &lt;div class="myclass"&gt;my text2&lt;/div&gt;
  &lt;!-- some other code follows --&gt;
  &lt;div&gt;
      &lt;p&gt;stuff&lt;/p&gt;
  &lt;/div&gt;
  &lt;p&gt;
      &lt;span&gt;Hello World&lt;/span&gt;
  &lt;/p&gt;
  &lt;input type=""/&gt;
  &lt;div class="myclass"&gt;my text3&lt;/div&gt;
  &lt;!-- some other code follows --&gt;
  &lt;div&gt;
      &lt;p&gt;stuff&lt;/p&gt;
  &lt;/div&gt;
  &lt;footer&gt;The end&lt;/footer&gt;
  </code></pre>
  
  <p>I have the CSS class <code>div.myclass {doing things}</code> that applies to all, obviously, but I also wanted to be able to select the first, second, or third div of class <code>.myclass</code> like this, <strong>regardless of where they are in the markup</strong>: </p>
  
  <pre class="lang-css prettyprint-override"><code>div.myclass:first {color:#000;} 
  div.myclass:second {color:#FFF;} 
  div.myclass:third {color:#006;}
  </code></pre>
  
  <p>Almost like the jQuery index selection <code>.eq( index )</code>, which is what I am using currently, but I need a no-script alternative.</p>
  
  <p>To be specific, I am looking for pseudo selectors, not things like adding another class or using IDs to make things work. </p>