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 Sass Basics (retired) Getting Started with Sass Advanced Nesting

Misty Majewski
Misty Majewski
5,276 Points

Bummer! 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

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

Should be this.

    p {
    a {
    color: red;
    }
      & > a {
    color: blue;
           &:hover {
             opacity: 0.5;
           }
        }
    }

Yes 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 :)

Hi Misty,

They want you to be more specific with your selector. It's a div with a class of .footer

Use div.footer

If this is the case I believe all you need to do is swap the '.footer' and the '&' around

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

It 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
Misty Majewski
5,276 Points

I 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
Misty Majewski
5,276 Points

I also tried swapping the footer and the & around.. Maybe I am putting in the wrong spot?

Misty Majewski
Misty Majewski
5,276 Points

Thanks it worked... I have learned a lot trying to figure out that challenge.. Thank you for your help!!

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

You're welcome.