Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Posted by Mirissage Fernando
Mirissage Fernando
Courses Plus Student 309 Points

Help stuck in CSS Selectors course > code challenger stage 2 ":first-child and :last-child Challenge"

Create a pseudo-class selector that targets the first-child li in .main-nav. Remove all border styles by setting border to none. Then, set the top-left and bottom-left border-radius to 5px.

my answer :

.main-nav > li : first-child { border: none; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }

see the screenshot http://www.clipular.com/c/5568161795538944.png?k=hIUuXOxYd0RbzYi5kv7vH5cILDM

Ira Salem
Ira Salem
10,331 Points

Try getting rid of the space between "li : first-child". Instead it should read "li:first-child".

Let me know if this works for you.

Mirissage Fernando
Mirissage Fernando
Courses Plus Student 309 Points

yes it worked & thanks

10 Answers

Ira Salem
Ira Salem
10,331 Points

No problem. Glad I could help.

Henrik Hansen
Henrik Hansen
23,176 Points
Henrik Hansen
Henrik Hansen
23,176 Points 
.main-nav > li:first-child { }

I think spaces matter in selectors.

Ira Salem
Ira Salem
10,331 Points
Ira Salem
Ira Salem
10,331 Points

Oh! Took me a while to see it. I noticed in between the ".main-nav" and the "li" you no longer have the greater than symbol. Instead you have a colon. It says ".main-nav:li:first-child" when it should say ".main-nav>li:first-child".

That's the only thing that I can see wrong with this so give it a try and let me know if it works ok!

Tom Evans
Tom Evans
3,814 Points
Tom Evans
Tom Evans
3,814 Points

ahhh thank you it worked!

Ira Salem
Ira Salem
10,331 Points

@tom evans

No problem.

Chris Paraoan
Chris Paraoan
4,481 Points
Chris Paraoan
Chris Paraoan
4,481 Points

You don't need to put a child selector.... here is what I put:

.main-nav li:first-child { border: none; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }

And it worked fine. Hope this helps anyone who has trouble with this..

Unsubscribed User
Unsubscribed User
4,513 Points
Unsubscribed User
Unsubscribed User
4,513 Points

li : first-child { border: none; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }

This works guys

Mirissage Fernando
PLUS
Mirissage Fernando
Courses Plus Student 309 Points
Mirissage Fernando
Mirissage Fernando
Courses Plus Student 309 Points

AWESOME THANKS GUYS

Tom Evans
Tom Evans
3,814 Points
Tom Evans
Tom Evans
3,814 Points

hi guys wondering if you could help me with this one...

.main-nav:li:first-child { border: none; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }

so i put this in and it says Bummer! Make you're setting all border properties to 'none'.

i don't understand

channonhall
channonhall
12,247 Points

Hey the problem is at .main-nav:li: -----------------------------------------^

remove the : infront of the li

MUZ140587 Matifadza Foyo
MUZ140587 Matifadza Foyo
9,182 Points
MUZ140587 Matifadza Foyo
MUZ140587 Matifadza Foyo
9,182 Points

remove : between your nav and li

ellie adam
ellie adam
26,376 Points
ellie adam
ellie adam
26,376 Points

.main-nav li:first-child { border: none; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }

Ary de Oliveira
Ary de Oliveira
28,298 Points
Ary de Oliveira
Ary de Oliveira
28,298 Points

I did not understand, about /* ( in .main-nav ) */ it was no clear to me?