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 trialSteve Pearce
Courses Plus Student 1,549 PointsCode 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
Treehouse Moderator 91,253 PointsAha! 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
3,852 PointsHey!
I think you have to write ul.contact-info.
Steve Pearce
Courses Plus Student 1,549 PointsYeah it was exactly that! Many thanks to the both of you.
Jonathan Grieve
Treehouse Moderator 91,253 PointsI'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
Courses Plus Student 1,549 PointsI wish I could answer that, if anyone else can please do?
Jonathan Grieve
Treehouse Moderator 91,253 PointsHmmm. 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
4,392 PointsHere'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.
Steve Pearce
Courses Plus Student 1,549 PointsThat explains it perfectly, thanks Selina.
Steve Pearce
Courses Plus Student 1,549 PointsThat explains it perfectly, thanks Selina.