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
Christian Andersson
8,712 PointsIncorrect question in challenge task?
In stage 7 of "Adding Pages to a Website" there is a code challenge that asks: "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.".
I tried to do:
.contact-info ul{
font-size: 0.9em;
margin: 0;
padding: 0;
list-style: none;
}
but that was apparently wrong. I then tried:
.contact-info{
font-size: 0.9em;
margin: 0;
padding: 0;
list-style: none;
}
which worked - but is this really right? The question asks you to select the ul from the class "contact-info". The latter code only selects the class.
I do realize that this will work anyway if you only ever apply that class to a ul, but perhaps the question needs to be rephrased?
3 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Christian,
If you want to make the selector more specific by including the element then you have to put it in front of the class.
ul.contact-info
That and .contact-info will both pass the challenge.
Your first selector is looking for a ul that is a descendant of an element with a class of "contact-info"
Hope that helps clear it up for you.
Logan R
22,989 PointsWhen you select an element, say <form class="not_form">, you can either select form or .not_form. You can not select both with a select like form .not_form because now it is looking for an element inside the <form> that has a class of .not_form.
Does that make some sense?
Christian Andersson
8,712 PointsYes it does, but that's provided you know that the class not_form is a form element. In a challenge task (where you haven't written any of the existing code yourself) it might be confusing. There was no option (tab) to go look at the html code to find out either.
In my example, the name contact-form doesn't say much about the element. It sounds like the class-name of a <form> element, but in this case it was a <ul>. I tried entering .contact-info ul because I had the impression that the <ul> was wrapped inside of another element with the class-name .contact-info.
Jason Anello
Courses Plus Student 94,610 PointsThe instructions stated "Select the unordered list with the class contact-info..." (emphasis mine)
So the instructions are telling you that it's the unordered list that has the class "contact-info"
The instructions are describing this: <ul class="contact-info">
This is a ul with a class of "contact-info"
I think the instructions would have been worded differently if the ul was a descendant.
Something like "Select the unordered list within the div with a class of contact-info..."
Christian Andersson
8,712 PointsHmm, perhaps you're right. It's a tricky way to word it I think, but perhaps it's just because my english isn't so good. Oh, well. Thanks anyway :)
Jason Anello
Courses Plus Student 94,610 PointsThis comes up a lot and maybe I'll start asking why they tried that selector. Try to figure out if there is some improvement that can be made.
Sreng Hong
15,083 PointsI think ul.contact-info is the correct one.
Christian Andersson
8,712 PointsChristian Andersson
8,712 PointsHi Jason, thanks for your reply. I understand how this works, but I think the question in said challenge might need to be rephrased in order to avoid confusion. Read the reply I made to Logan below. :-)
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsYou're welcome.
I replied to that explaining why i think the wording is ok. Perhaps you can offer a suggestion on how you think it could be worded better.
I know that a lot of people want to use the selector that you first tried but I can't figure out what is in the wording that would suggest that.
I always thought that students knew the ul and class were with each other but didn't realize they were creating a descendant selector when doing
.contact-info ulI think you knew what you were doing and thought that was what the instructions were asking for. So maybe I'm wrong about why students keep wanting to use that selector.
When you read the instructions did you think the html might be something like this:
Because then your 1st selector would work but when I read the instructions I can't see how it might be describing that html. I think the keyword here is with. The
uland the class are with each other.Christian Andersson
8,712 PointsChristian Andersson
8,712 PointsI have a fair amount of past experience creating and editing html, css and the like. When you do have past experience of something you sort of tend to rush through "the easy parts of a course" and you're consequently prone to interpret things incorrectly out of pure haste. At the time I thought I had understood the task 100% and it didn't occur to me that it was asking for something slightly different. That was my error here.
Still though, having the HTML code in that challenge would have been handy. I think.