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

HTML How to Make a Website Adding Pages to a Website Add and Style Icons

Steve Pearce
PLUS
Steve Pearce
Courses Plus Student 1,549 Points
Posted by Steve Pearce
Steve Pearce
Courses Plus Student 1,549 Points

Code Challenge: Add and Style Icons

Hi everyone,

This is probably very simple but if anyone could help it would be appreciated.

Task is: Select the unordered list with the class contact-info and set the font size to 0.9em. Then, remove all margin, padding, and list styling.

My code is: .contact-info ul { font-size: 0.9em; margin: 0; padding: 0; list-style: none; }

Once I check the work, its incorrect but all it says is "Be sure to set the font size to 0.9em." Which I thought I'd done?

Thanks.

9 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Aha! Jessica posted this one earlier.

You need a different selector. so try ul.contact-info rather than .contact-info ul. It's your selector that's the trouble.

Arsallan Shirvani
Arsallan Shirvani
3,852 Points
Arsallan Shirvani
Arsallan Shirvani
3,852 Points

Hey!

I think you have to write ul.contact-info.

Steve Pearce
PLUS
Steve Pearce
Courses Plus Student 1,549 Points
Steve Pearce
Steve Pearce
Courses Plus Student 1,549 Points

Yeah it was exactly that! Many thanks to the both of you.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

I've just done this exercise myself. Not withstanding that we know the answer is ul.contact-info, why is this the case baring in mind the video does it the other way?

Steve Pearce
PLUS
Steve Pearce
Courses Plus Student 1,549 Points
Steve Pearce
Steve Pearce
Courses Plus Student 1,549 Points

I wish I could answer that, if anyone else can please do?

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hmmm. okay. Let's think about what the selectors are actually doing.

ul.contact-info - That's selecting an unordered list that has the class of contact-info We're all agreed about that yes?

then we have

.contact-info ul - Thinking about it more, I can't think of an example where i've set out a selector like this, yet this is the way it has been done in the video and it demonstrates that it is finding and styling the correct element. We seem to be looking for a class, a class assigned to any unordered list element. ul.contact-info seems to be far more specific.

To be honest, I haven't been following the workspaces on the videos as we use pretty much the same code on our code challenges. I just wish I knew what the main differences were.

Selina Haynes
Selina Haynes
4,392 Points
Selina Haynes
Selina Haynes
4,392 Points

Here's what happening:

In the case of ul.contact-info, you are selecting an unordered list with the class name "contact-info". In the case of .contact-info ul, you are selecting the class "contact-info" with an unordered list nested inside of it.

Since the unordered list element is named "contact-info", not inside "contact-info", the second example won't work.

I hope that helps.