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

Magnus Petterson
Magnus Petterson
2,429 Points
Posted by Magnus Petterson
Magnus Petterson
2,429 Points

Can't solve the challenge: "advanced nesting"

Task 4 of 4 is:
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.

I don't know what's wrong with my .scss code ... I always get the same error message: "Bummer! Please use the ampersand selector following the selector for the .footer div."

index.html 
<!DOCTYPE html>
<html>
<head>
  <title>Sass Basics - Code Challenge</title>
  <link rel="stylesheet" type="text/css" href="page-style.css">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>Hampton's Blog</h1>
  <div class="entry">
    <h1><a href="#">Delicious Food in SF</a></h1>
    <div class="content">
      <p>
        You know what my favorite restaurant in San Francisco is? The answer is that there are so many great restaurants that I couldn't choose one. But honorable mentions include <a href="#">Mr. Chow's</a>, <a href="#">Live Sushi</a> and <a href="#">Piccino</a>. 
        <span class="link"><a href="/info.html">Read More</a></span>
      </p>
    </div>
  </div>
  <div class="entry">
    <h1><a href="#">Great Music</a></h1>
    <div class="content">
      <p>
        Here are some of my favorite bands from years past and present: Belle and Sebastian, Pixies, and Daft Punk. Listening to music allows me to focus when I'm programming. 
        <span class="link"><a href="/info.html">Read More</a></span>
      </p>
    </div>
  </div>
  <div class="footer">
    <p>
      Thanks for reading my blog!  Be sure to check out my <a href="#">other articles</a>.
    </p>
  </div>
</body>
</html>
style.scss 
/* Write your SCSS code below. */
p {

  a {
    color: red;

    .footer & {
    color: purple;
   }
  }

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

}

5 Answers

Mireille Pasos
Mireille Pasos
35,469 Points

Hello, I honestly see nothing wrong with your code, but the challenges sometimes are very very picky. Would you mind trying something more specific to see if it works? something like:

div.footer & {}

Travis Christian
Travis Christian
19,878 Points

Thank you! I was having the same problem and you just helped me after 45 minutes of trying to figure out where I went wrong.

Johan Gouws
Johan Gouws
10,121 Points
Johan Gouws
Johan Gouws
10,121 Points

Thx, you helped me as well

Mireille Pasos
Mireille Pasos
35,469 Points
Mireille Pasos
Mireille Pasos
35,469 Points

Excellent!

Mireille Pasos
Mireille Pasos
35,469 Points
Mireille Pasos
Mireille Pasos
35,469 Points

Good to know this answer helped you Travis! I think we've all been there at least once: staring at the code, knowing there's no error but it just won't work.

Brett Henning
Brett Henning
8,772 Points
Brett Henning
Brett Henning
8,772 Points

Thanks guys just couldn't figure it out. Awesome!!