How do I select certain siblings via CSS?
<div class="wrapper">
<script></script>
<script></script>
<ul class="cars">
<li class="headline">My Cars</li>
<li>Ferrari</li>
<li>Hummer</li>
</ul>
<noscript></noscript>
<script></script>
<script></script开发者_如何学编程>
<ul class="cars">
<li class="headline">My Cars</li>
<li>Volvo</li>
<li>Caddilac</li>
</ul>
<noscript></noscript>
<script></script>
<script></script>
<ul> etc....
</div>
Question: How can I hide ALL the <li class="headline">My Cars</li> elements, except the first one, using only CSS?
I asked a slightly similiar question yesterday which the answer for worked fine, but the scenario has changed which caused further problems. I'm in a position where I have only control over the CSS so please do not suggest using JavaScript or modifying the HTML.
It's those damned <script> and <noscript> elements which causes the solution from yesterday to totally fail.
For browser compatibility I would appreciate if the solution did NOT use CSS3.
Any ideas?
It's probably not feasible using CSS2 unless you could modify your HTML somehow, e.g. to include a first class to your first ul. Without being able to touch your HTML, there isn't a CSS2 selector I can come up with.
But if the answer to both of these questions is yes:
Are all your
li.headlines only going to be inulelements?Is your
div.wrapperonly going to contain eitherscript,noscriptorulelements as children?
Then it's easy with CSS3 selectors:
.wrapper > ul:first-of-type ~ ul li.headline {
display: none;
}
With your exact HTML structure (not having a <noscript> above the first set of <script> elements) this will work:
.wrapper > noscript + script + script + .cars > .headline {
display: none
}
I very much dislike it though, because it's too fragile. I'd rather use JavaScript than that abomination.
See: http://jsfiddle.net/davT8/
This will work in IE7+ and modern browsers.
li.headline {
display: none;
}
It is compatible in all standard browsers (see compatibility here: http://www.quirksmode.org/css/display.html )
加载中,请稍侯......
精彩评论