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

Jeroen Pets
Jeroen Pets
8,016 Points
Posted by Jeroen Pets
Jeroen Pets
8,016 Points

Can't solve: Post-selector ampersand Task

Hello,

I am really stuck solving this task, don't know what i am doing wrong tried several things. So please can someone help me with the solution.

Thanks in advance!

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

p {
    a {
  color: red;
  }

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

}

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

2 Answers

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

You're going to want to nest that .footer within the links nesting already and then use & to represent the parent a. For some reason too I had to add div.footer instead of just .footer for the assignment to pass.

p {
    a { color: red; }

    > a { 
        color: blue;
        &:hover { opacity: 0.5; } 
        div.footer & { color: purple; }
    }
}
Jeroen Pets
Jeroen Pets
8,016 Points
Jeroen Pets
Jeroen Pets
8,016 Points

Already tried this before without "div" in front of it... Thanks a lot.