CSS hide all elements from a class except for the first one in IE6

Question

I'm looking for a way to hide all elements of a particular class - except for the first one. I do realize that there are ways to do this in javascript, but this functionality would be for those without javascript enabled - hence why I'm looking for a CSS only solution, if there is any.

<div class="foo">Content 1</div> //not hidden
<div class="foo">Content 2</div> //hidden
<div class="foo">Content 3</div> //hidden

I can achieve this by using the first-child pseduo-class like:

.foo:first-child {
    display:block;
}
.foo {
    display:none;
}

But since IE6 doesn't support this pseduo-class, it won't work. Unfortunately, I can't cancel IE6 support (sigh), so I'm looking for a way to achieve this without using this particular selector.

Thanks!

Answer 1

use a class of the same style as fallback. since i am unsure if IE6 supports chaining (as far as i know, it doesn't), use a container to indicate.

/*hide all foo*/
.container .foo {
    display:none;
}

/*as suggested, might as well do this and drop the others altogether*/
.container .first-child { 
    display:block;
}

<div class="container">
    <div class="foo first-child">Content 1</div> //not hidden
    <div class="foo">Content 2</div> //hidden
    <div class="foo">Content 3</div> //hidden
</div>

Answer 2

With the given markup, a CSS solution only for IE6 is impossible. There is no way to target the first child, only general rule for all descendants.

Answer 3

This is all I can think of...

<div class="foo">Content 1</div>
<!--[if IE 6]><div style="display:none"><![endif]-->
<div class="foo">Content 2</div>
<div class="foo">Content 3</div>
<!--[if IE 6]></div><![endif]-->​

OR

<div class="foo">Content 1</div>
<noscript><div style="display:none"></noscript>
<div class="foo">Content 2</div>
<div class="foo">Content 3</div>
<noscript></div></noscript>​

​

Example: http://jsfiddle.net/FkCzB/