开发者

CSS selector to hide first of a set

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">   开发者_Go百科 
    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;}


Could...

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

... do it? I also made a jsFiddle demo


.result span:nth-of-type(2) {display:none}

works too... albeit messy like :P


I just need the correct selector.
Something like div.result span.smalltext:first-child {display: none;}

See this answer for why your attempt did not work: Why doesn't this CSS :first-child selector work?

Use .result > span:first-child + a + .smalltext instead.

This selector will work in all browsers (except IE6).


Two different approaches I'd say, either CSS or jQuery CSS:

.result span:nth-of-type(2) {font-weight:bold;}

JS:

$('.result').each(function(){
    $(this).find('.smalltext:first').css('background-color', 'red');
});

That's as long as the HTML really doesn't change. Fiddle'd it, too http://jsfiddle.net/PDBmU/19/

/edit Obviously the css attributes given in this example are for demonstration purpose, you'd need display:none; or display:hidden; depending on wanted output


i'm not sure, how stable this is, as your output could contain a lot of a + spans, but this should work with your example

.result > a + span {
  display: none;
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜