Question

<div id="foo">
    <a id="bar1">show me</a>
    hide me
    <a id="bar2">hide me too</a>
</div>

How do I use CSS (display:none;) to only have the first a element visible?

Answer 1

This won’t work:

#foo {
    display: none
}
#bar1 {
    display: block
}

This works, but visibility: hidden has it’s own downsides:

#foo {
    visibility: hidden
}
#bar1 {
    visibility: visible
}

display: inline-block/block is seemingly required to make this work in IE8.

That’s the closest you can get without changing your HTML:

HTML:

<div id="foo">
    <a id="bar1">show me</a>
    <span>hide me</span>
    <a id="bar2">hide me too</a>
</div>

CSS:

#foo span, #bar2 {
    display: none
}