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 likediv.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 + span
s, but this should work with your example
.result > a + span {
display: none;
}
精彩评论