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

#css #css-selectors

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

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

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

Именно эти проклятые элементы <script> и <noscript> приводят к полному сбою вчерашнего решения.

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

Есть идеи?

1. Почему там все эти <script> теги? Я знаю, я знаю, вы сказали «не предлагайте изменять HTML», но наличие всех этих <script> символов свидетельствует о плохом дизайне.

2. Да, я знаю. И соглашаюсь. Теги скрипта имеют какое-то отношение к рекламе, которая «вставляется» туда …. и, к сожалению, я ничего не могу с этим поделать.

3. Определенно ли нет <noscript> элемента для первого набора элементов?

4. Да, это определенно так.

Ответ №1:

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

Но если ответ на оба этих вопроса положительный:

Все ваши li.headline файлы будут только в ul элементах?
Ваш div.wrapper будет содержать только script , noscript или ul элементы в качестве дочерних?

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

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

1. Я поместил туда решение CSS3 в качестве последней попытки. По крайней мере, это работает для браузеров, которые в любом случае его поддерживают.

2. Ответ на оба ваших вопроса — да. И решение работает нормально, поскольку я использую FF4. Однако, знаете ли вы хорошо обновленный сайт, на котором указано, какие браузеры поддерживают ~ selector / operator?

3. @Foad Farkhondeh: Большинство браузеров общего пользования поддерживают это, включая IE7 .

4. @Foad Farkhondeh: Это :first-of-type то, о чем вам нужно беспокоиться. Это только для IE9 .

Ответ №2:

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

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

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

Смотрите: http://jsfiddle.net/davT8

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

Ответ №3:

 li.headline {
    display: none;
}

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

1. Не было бы наоборот, просто отобразить первый?

2. @BoltClock — Видимо, пропустил это. Да, один CSS этого не сделает, если у вас нет доступа к html для изменения классов.

3. @blankabout Да, на самом деле не имеет значения, скрываю ли я все, кроме первого, или отображаю только первый.