Question

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.

http://jsfiddle.net/mrtsherman/PDBmU/13/

I need to hide the span.smalltext containing (Documentation x.x.x). In the fiddle I highlighted this with a red box.

<div class="result">                       
  <span class="icon icon-page" title="Page">Page:</span>
  <a href="/display/">Create</a>
  <!-- Hide this span -->
  <span class="smalltext" style="border: 1px solid red;">
    (<a href="/display/doc">Documentation x.x.x</a>)
  </span>    
  <br>
    ... <span class="search-highlight"><strong>search</strong></span> project ...         
  <br>
  <span class="smalltext">    
    Jun 17, 2011 14:57
  </span>
</div>
<!-- ## The above structure is repeated many times. I would like to hide all of them.  -->

I tried something like this so far – but it didn’t work

div.result span.smalltext:first-child {display: none;}

Answer 1

Could…

.result a + .smalltext {
    display:none;
}

… do it? I also made a jsFiddle demo