CSS selector for first element inside class

Question

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 1

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.

Answer 2

You should move :first-child pseudo-class:

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

But it requires that div to be the first child of it's parent element.

DEMO

Answer 3

So simple

$('.foo:nth-child(3)')