How to select some siblings, but not only through 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"> CSS only? I tried several different selector methods like + , > , etc., but to no avail. I am in a position where I do not control the source code, but only CSS. Therefore, please do not suggest using javascript, changing HTML, etc. I just can't change anything except CSS :)

Answer 1

Each .headline always the first descendant of its containing .cars , so choose siblings based on .cars elements.

Most likely you want a 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; } 

Answer 2

Yes you can use the CSS3 nth-child selector:

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

More details here: http://www.quirksmode.org/css/nthchild.html

Answer 3

CSS3 has an nth-of-type () selector, but MSIE does not support its AFAIK.