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?

Community · Accepted Answer · 2017-05-23 10:34:09Z

4

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.

edited May 23, 2017 at 10:34

CommunityBot

11 silver badge

answered Apr 12, 2013 at 20:20

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MarcinJuraszek · Accepted Answer · 2013-04-12 20:19:47Z

1

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

answered Apr 12, 2013 at 20:19

MarcinJuraszek

126k15 gold badges199 silver badges267 bronze badges

Comments

Kevin Kopf · Accepted Answer · 2016-09-27 08:40:46Z

-1

So simple

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

edited Sep 27, 2016 at 8:40

Kevin Kopf

14.3k15 gold badges57 silver badges69 bronze badges

answered Sep 26, 2016 at 17:34

suprem

1

Collectives™ on Stack Overflow

CSS selector for first element inside class

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related