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

CSS Sass Basics (retired) Getting Started with Sass Advanced Nesting

Posted by Daniel Gregory
Daniel Gregory
3,956 Points

Sass code challenge: make footer links purple using ampersand

I can't see where I'm going wrong :S the code challenge is asking me to use the ampersand to make the links in the footer purple.

/* Write your SCSS code below. */

p {

a { 

color:red;

.footer & { color: purple;} }

a { color:blue; &:hover { opacity: 0.5; }

}

as far as I can see this should work and display as .footer p a { color:purple;} when converted to css but the code challenge still says "Please use the ampersand selector following the selector for the .footer div."

3 Answers

Phillip Gibson
Phillip Gibson
13,805 Points

You just need to add a div before the .footer class selector:

p {
  a {
    div.footer & {
      color: purple;
    }
  }
}
Daniel Gregory
Daniel Gregory
3,956 Points
Daniel Gregory
Daniel Gregory
3,956 Points

Thanks! I just found a similar answer on this thread > https://teamtreehouse.com/forum/sass-selector but I don't understand why! If the code from the code challenge is copied and saved and then viewed in a browser it works without prefixing div

Phillip Gibson
Phillip Gibson
13,805 Points

Technically, either way should work. My only guess is since the question specifically points out "the div with the class footer", that perhaps that implies there could be other elements with that class, so then you would need to up your specificity to select only the div.

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

It also seems to pass if you nest it in the direct child selector

p {
    a {
    color: red;
  }

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

    div.footer & {
        color: purple;
    }
  }  
}

Not sure which one they're looking for. I think the question could have been worded a little better.

I had assumed that we were still working within the direct child selector since task 2 and 3 were dealing with that.