开发者

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:

  1. Are all your li.headlines only going to be in ul elements?

  2. Is your div.wrapper only going to contain either script, noscript or ul 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 )

0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜