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 Jerilyn P
Jerilyn P
8,788 Points

Can't figure out where to put the ampersand (&) as post-selector in Sass exercise

The instructions for this challenge read:

"We want to add an exception for <a> tags that are in the <div> with a class of .footer: those links should be purple. Use the post-selector ampersand to achieve this."

Here is my code:

/* Write your SCSS code below. */
p {
  a {
    color: red;
  }
  > a {
    color: blue;
    .footer & {
      color: purple;
    }    
    &:hover {
      opacity: 0.5;
    }
  }
}

I am pretty sure the problem is that I am putting the .footer & {} order in the wrong place, but I'm not sure where it should go.

Thanks in advance for your help.

1 Answer

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

Hi Jerilyn,

You have your & in the correct spot. The challenge wants you to be more specific with the selector.

It's a div with a class of "footer", not just any element with a class of "footer"

Jerilyn P
Jerilyn P
8,788 Points

Thank you!! I am still not getting it to work. I have written:

.footer div & { color: purple; }

and tried nesting it just under the a element, and just under the &:hover element under >a. Neither seems to be right. Am I putting it in the wrong place?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You can nest it either in the descendant a selector or the direct child selector.

You want to use div.footer That will select a div with a class of "footer"

Final selector would be div.footer &

Depending on where you nested it the final compiled selector would be div.footer p a or div.footer p > a