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>