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

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

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.

yes it worked & thanks

10 Answers

No problem. Glad I could help.

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

I think spaces matter in selectors.

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

ahhh thank you it worked!

@tom evans

No problem.

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..

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

This works guys

AWESOME THANKS GUYS

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

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

remove the : infront of the li

remove : between your nav and li

ellie adam
ellie adam
26,376 Points

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

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