Как выбрать определенных братьев и сестер с помощью CSS?

Question

<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>

Вопрос: Как я могу скрыть ВСЕ элементы <li class="headline">My Cars</li>, кроме первого, используя только CSS?

Вчера я задал слегка похожий вопрос, ответ на который сработал нормально, но сценарий изменился, что вызвало дальнейшие проблемы. Я нахожусь в положении, когда у меня есть только контроль над CSS, поэтому, пожалуйста, не предлагайте использовать JavaScript или модифицировать HTML.

Это те проклятые элементы <script> и <noscript>, из-за которых вчерашнее решение полностью провалилось.

Для совместимости с браузером я был бы признателен, если бы решение НЕ использовало CSS3.

Есть идеи?

Answer 1

Использование CSS2, вероятно, невозможно, если только вы не можете каким-либо образом изменить свой HTML, например, включить класс first в свой первый ul.Не имея возможности прикоснуться к вашему HTML, я не смогу выбрать селектор CSS2.

Но если ответ на оба этих вопроса - да:

1. Все ваши li.headline будут только в ul элементах?

2. Ваш div.wrapper будет содержать только script, noscript или ul элементы как дети?

Тогда с CSS3-селекторами все просто:

.wrapper > ul:first-of-type ~ ul li.headline {
    display: none;
}

Answer 2

С вашей точной HTML-структурой (не имеющей <noscript> над первым набором <script> элементов) это будет работать:

.wrapper > noscript + script + script + .cars > .headline {
    display: none
}

Мне очень не нравитсяпотому что это слишком хрупкоЯ предпочел бы использовать JavaScript, чем эту мерзость.

См .: http://jsfiddle.net/davT8/

Это будет работать в IE7 + и современных браузерах.

Answer 3

li.headline {
    display: none;
}

Совместимо со всеми стандартными браузерами (см. Совместимость здесь: http://www.quirksmode.org/css/display.html)