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 Emy Ng
Emy Ng
8,035 Points

Sass use of post selector ampersand

I'm trying to figure out this problem. I'm pretty sure this is the right answer, but it's wrong.

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.

/* Write your SCSS code below. */ p { a { color: red; .footer div & { color: purple; } }

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

Here is the index.html for the footer

div class="footer" p Thanks for reading my blog! Be sure to check out my -a href="#">other articles</a /p /div

5 Answers

Oleg Knyazev
Oleg Knyazev
12,363 Points
Oleg Knyazev
Oleg Knyazev
12,363 Points

There's the trick in the description when the <div> is mentioned. The html markup gives you a hint about where to place the < div > selector in the stylesheet. I don't know why they decided to put that completion term in there, the .footer would be pretty much sufficent, but it is what it is. To complete this challenge task you should use place this inside the < a > rule: div.footer & { color: purple; }

Manav Misra
Manav Misra
11,778 Points

That's silly! CSS Lint discourages using this type of notation...forget the term, but when there's no space in between selector and class...

Fernanda Salerno
Fernanda Salerno
2,733 Points
Fernanda Salerno
Fernanda Salerno
2,733 Points 
p{
    a{
    color:red;
        div.footer &{color:purple;}
        }
    &>a{
       color:blue;
           &:hover{opacity: 0.5;}  
         }  
}
Thomas Ropers
PLUS
Thomas Ropers
Courses Plus Student 8,843 Points
Thomas Ropers
Thomas Ropers
Courses Plus Student 8,843 Points

This will work:

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

Robert Erick
Robert Erick
24,909 Points
Robert Erick
Robert Erick
24,909 Points

/* Write your SCSS code below. */ p{ a{ color:red; }

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

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

Erik Nemesis
Erik Nemesis
13,356 Points
Erik Nemesis
Erik Nemesis
13,356 Points

The ampersand character refers to the "parent" rule in a nested contest. For instance, given the following rules"

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

would be translated in css with a rule: .footer div a { color: purple; } therefore links inside any divs inside the .footer

But your links are not inside any divs! True, they are inside the footer but since there is no divs inside, the rule won't be matched.

Hope that helps.