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

Question: How can I hide ALL the <li class="headline">My Cars</li> elements, except the first one, using only CSS?

I asked a slightly similiar question yesterday which the answer for worked fine, but the scenario has changed which caused further problems. I'm in a position where I have only control over the CSS so please do not suggest using JavaScript or modifying the HTML.

It's those damned <script> and <noscript> elements which causes the solution from yesterday to totally fail.

For browser compatibility I would appreciate if the solution did NOT use CSS3.

Any ideas?

Improve this question
4
  • Why are all those <script> tags there? I know, I know, you said "don't suggest modifying the HTML", but having all those <script>s is representative of poor design. Commented May 4, 2011 at 13:04
  • Yeah I know. And agree. The script tags has something to do with ads being "inserted" there.... and sadly I can't do anything about that. Commented May 4, 2011 at 13:07
  • Is there definitely not a <noscript> element for the first set of elements? Commented May 4, 2011 at 13:10
  • Yes it is definitely so. Commented May 4, 2011 at 14:00

3 Answers 3

Reset to default
4

It's probably not feasible using CSS2 unless you could modify your HTML somehow, e.g. to include a first class to your first ul. Without being able to touch your HTML, there isn't a CSS2 selector I can come up with.

But if the answer to both of these questions is yes:

  1. Are all your li.headlines only going to be in ul elements?

  2. Is your div.wrapper only going to contain either script, noscript or ul elements as children?

Then it's easy with CSS3 selectors:

.wrapper > ul:first-of-type ~ ul li.headline { display: none; }
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I put the CSS3 solution there as a last ditch effort. At least it works for browsers that support it anyway.
The answer to both your question is yes. And the solution works fine since I'm using FF4. However, do you know a well updated site which states which browsers supports the ~ selector/operator?
@Foad Farkhondeh: Most general-use browsers support it, including IE7+.
@Foad Farkhondeh: It's :first-of-type that you have to worry about. That's IE9+ only.
3

With your exact HTML structure (not having a <noscript> above the first set of <script> elements) this will work:

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

I very much dislike it though, because it's too fragile. I'd rather use JavaScript than that abomination.

See: http://jsfiddle.net/davT8/

This will work in IE7+ and modern browsers.

Improve this answer

Comments

0 
li.headline { display: none; }

It is compatible in all standard browsers (see compatibility here: http://www.quirksmode.org/css/display.html )

Improve this answer

3 Comments

Wouldn't it be the other way round just to display the first one?
@BoltClock -- Missed that apparently. Yeah CSS alone isn't gonna do it unless you have access to the html to change the classes around.
@blankabout Yes, it doesn't really matter if I hide all except first or only display the first one.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.