title: CSS selector to hide first of a set
body: <p>To start, I have no control over the html. I am looking for a CSS solution. CSS2/3 are fine. I have no idea why I can't figure this out, but hey it's Friday. I guess my brain is scrambled.</p>
  
  <p><a href="http://jsfiddle.net/mrtsherman/PDBmU/13/" rel="nofollow">http://jsfiddle.net/mrtsherman/PDBmU/13/</a></p>
  
  <p>I need to hide the span.smalltext containing (Documentation x.x.x). In the fiddle I highlighted this with a red box.</p>
  
  <pre><code>&lt;div class="result"&gt;                       
    &lt;span class="icon icon-page" title="Page"&gt;Page:&lt;/span&gt;
    &lt;a href="/display/"&gt;Create&lt;/a&gt;
    &lt;!-- Hide this span --&gt;
    &lt;span class="smalltext" style="border: 1px solid red;"&gt;
      (&lt;a href="/display/doc"&gt;Documentation x.x.x&lt;/a&gt;)
    &lt;/span&gt;    
    &lt;br&gt;
      ... &lt;span class="search-highlight"&gt;&lt;strong&gt;search&lt;/strong&gt;&lt;/span&gt; project ...         
    &lt;br&gt;
    &lt;span class="smalltext"&gt;    
      Jun 17, 2011 14:57
    &lt;/span&gt;
  &lt;/div&gt;
  &lt;!-- ## The above structure is repeated many times. I would like to hide all of them.  --&gt;
  </code></pre>
  
  <p>I tried something like this so far - but it didn't work</p>
  
  <pre><code>div.result span.smalltext:first-child {display: none;}
  </code></pre>