<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.headline
s only going to be inul
elements?Is your
div.wrapper
only going to contain eitherscript
,noscript
orul
elements 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 )
精彩评论