Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by christian lian huat toh
christian lian huat toh
7,213 Points

:first-child not working ??

I'm having a problem in my css rule I can't figure out why this rule won't run:

CODE : input[type="button"]:first-child { }

I wan't to select the first button in the form but it won't work

2 Answers

Tom Byers
Tom Byers
13,005 Points
Tom Byers
Tom Byers
13,005 Points

Hi Christian,

That syntax snippet is correct. Is the input definitely the first child of the form? If it's not it won't work.

For example, the selector input[type="button"]:first-child {} should work as intended here:

<form>
  <input  type="button" />
  <input  type="button" />
</form>

but it won't work as intended here as the input is not the first child element - you'd need to use :first-of-type instead:

<form>
  <label>Some Label></label>
  <input type="button" />

  <label>Some Label></label>
  <input type="button" />
</form>

Hope this helps?

Richard Lambert
PLUS
Richard Lambert
Courses Plus Student 7,180 Points
Richard Lambert
Richard Lambert
Courses Plus Student 7,180 Points

Hi Christian,

Mozilla Developer Network provides good examples of what attribute selectors and the :first-child selector target.

Have a play with my workspace to get a better feel for what these selectors do. Hope this helps.