Ragen Dazs Ragen Dazs - 2 months ago 9
CSS Question

CSS selector for first element inside class

I have this stuff

<div class="foo">
<input type="text" name="bar" value="" />
<a href="javascript:void(0)">foobar 1</a>
</div>
<div class="foo">
<input type="text" name="bar" value="" />
<a href="javascript:void(0)">foobar 2</a>
</div>
<div class="foo">
<input type="text" name="bar" value="" />
<a href="javascript:void(0)">foobar 3</a>
</div>

<!-- I'm trying with this CSS, but with no luck -->
<style>
.foo a:first-child {
display:none;
}
</style>


How can I only display
foobar 2
and
foobar 3
links?

Answer

The selector should select the first .foo element, not the first a within foo.

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

See this post for more information on pseudo selectors as well as this working example.

Comments