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 CSS Foundations Selectors Basic Structural Pseudo-Classes

Posted by colinwillox
colinwillox
2,549 Points

In the challenge, I'm asked to style the first-child of the ul element, so wouldn't the CSS be "ul:first-child?"

The correct code for the challenge (to continue) ended up being just " :first-child ", but based on the rules, wouldn't that also select the first-child of every other element?

So in this case, also the first child of the body element, which is the ul itself?

It seems by simply writing the structural pseudo-element selector " :first-child " I am actually applying any style to both the ul (first and only child of the body), and ALSO the first li within the ul.

3 Answers

Veljko Mirkovic
Veljko Mirkovic
3,818 Points
Veljko Mirkovic
Veljko Mirkovic
3,818 Points

Think of it this way. "Little Timmy, if you're the first/second/last/only child of John than you get a cookie ( color or whatever).

You shouldn't go to John or he'll punch you.

So it's not ul:first-child {}, it's li:first-child.

Hope I didn't add confusion :)

SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points
SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points

Wow that seems a little odd to me too. The "first-child" is a little counter intuitive to understand (in my opinion), but here is the way I finally figured it out.

You may think a "li:fist-shild" as: "select all li elements that are the first child of it's parent element".

I know you are tempted to think that "ul:fist-child" will: "select the first-child of the ul". But it doesn't work like this.

Hope this helps,

SERGIO

colinwillox
colinwillox
2,549 Points

Sorry - I may not be understanding you correctly...

So what would the correct one be?

SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points
SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points

Sorry for the misunderstanding,

If you are trying to select the fist "li" element of a "ul"; the correct way of doing so is: li:first-child{}.

A useful way to remember how the first-child selector works is to read this selector as: "select all "li" elements that are the fist child of their parent.

Hope this clarifies my confusing first answer.

colinwillox
colinwillox
2,549 Points
colinwillox
colinwillox
2,549 Points

It does, thanks!

Basically, I'm first typing "li" since THAT is what I want to select. Then I specify which type of li (the first child).