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.
Misty Majewski
5,276 PointsBummer! Please use the ampersand selector following the selector for the footer div.
p { a { color: red; .footer & { color: purple; }
a { color: blue; &:hover { opacity: 0.5; } } }
I'm sure what I am doing wrong. I am suppose to be adding an exception to the div with a class of footer and I have to use the post-selector ampersand?
6 Answers
Jason Anello
Courses Plus Student 94,596 PointsThe order in your original code is correct. The & has to come after div.footer so div.footer & is correct.
The compilation error is because you are missing a closing curly brace.
You didn't properly close your first a selector.
I didn't catch that the first time around.
Adam Sackfield
Pro Student 19,663 PointsShould be this.
p {
a {
color: red;
}
& > a {
color: blue;
&:hover {
opacity: 0.5;
}
}
}
Adam Sackfield
Pro Student 19,663 PointsYes I see. Think I got lost in the nesting there. I do believe the poster has the wrong order as I did the quiz when saw the post and my answer was correct up to challenge 3. So it just need the & .footer adding before the last } in my example. Unless I am going insane which is a very real possibility :)
Jason Anello
Courses Plus Student 94,596 PointsHi Misty,
They want you to be more specific with your selector. It's a div with a class of .footer
Use div.footer
Adam Sackfield
Pro Student 19,663 PointsIf this is the case I believe all you need to do is swap the '.footer' and the '&' around
Jason Anello
Courses Plus Student 94,596 PointsWouldn't that reverse the parent/child relationship though?
If you put the & first then it would be selecting .footer elements that are inside of an a tag that is inside of a p tag.
Jason Anello
Courses Plus Student 94,596 PointsIt looks like you lose your comment if you try to edit it.
I wanted to add that the final css output for that part should look like:
div.footer p a {
color: purple;
}
Misty Majewski
5,276 PointsI tried the div.footer p a.. it said it was not a nested rule.. When I tried div.footer & it said it was a compilation error. I am so confused. Watched video again but it didn't cover anything like this.. Any other suggestions?
Misty Majewski
5,276 PointsI also tried swapping the footer and the & around.. Maybe I am putting in the wrong spot?
Misty Majewski
5,276 PointsThanks it worked... I have learned a lot trying to figure out that challenge.. Thank you for your help!!
Adam Sackfield
Pro Student 19,663 PointsI believe that is the best way to learn, by trying something and working through your errors. I am learning Rails and this approach seems to work.
Jason Anello
Courses Plus Student 94,596 PointsYou're welcome.