Как выбрать некоторых братьев и сестер, но не все только через CSS?

Question

<div class="wrapper">
   <ul class="cars">
      <li class="headline">My Cars</li>
      <li>Ferrari</li>
      <li>Hummer</li>
   </ul>
  <ul class="cars">
      <li class="headline">My Cars</li>
      <li>Volvo</li>
      <li>Caddilac</li>
   </ul>
</div>

Есть ли способ скрыть второй <li class="headline"> только с помощью CSS? Я пробовал несколько различных методов выбора родного брата, таких как +, > и т. Д., Но безуспешно. Я нахожусь в положении, когда у меня нет контроля над исходным кодом, только CSS. Поэтому, пожалуйста, не предлагайте использовать javascript, изменять HTML и т. Д. Я просто не могу ничего изменить, кроме CSS:)

Answer 1

Каждый .headline всегда является первым дочерним элементом, содержащим .cars, поэтому выберите братьев и сестер на основе элементов .cars.

Скорее всего, вам нужен второй .cars:

/* CSS2 */
.cars:first-child + .cars .headline {
    display: none;
}

/* CSS3 equivalent, but for browser compatibility just use the above instead */
.cars:nth-child(2) .headline {
    display: none;
}

Answer 2

CSS3 имеет селектор nth-of-type () , но MSIE не поддерживает его AFAIK.

Answer 3

Да, вы можете использовать селектор CSS3 nth-child:

div.wrapper ul.cars:nth-child(2) li.headline { display: none; }

Подробнее здесь: http://www.quirksmode.org/css/nthchild.html