How do I select some siblings but not all only via 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>

Is there a way to hide the second <li class="headline"> with only CSS? I've tried several different sibling selector methods such as +, > etc.. but without success. I'm in a position where I have no control over the source code, only the CSS. So please do not suggest using javascript, changing the HTML etc. I simply can't change anything except the CSS :)

Answer 1

Each .headline is always the first child of its containing .cars, so select siblings based on the .cars elements instead.

Most likely, you want the second .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;
}