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 Donald Richmond
Donald Richmond
13,807 Points

How to use a post-selector ambersand

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.

Does any one know the answer to this question?

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;   }  }
p {  >a  { color: blue; 
          &:hover { opacity: 0.5;  }
         }  
  }
  .footer div &a {color: purple;}

4 Answers

Sally Gradle
Sally Gradle
24,694 Points
Sally Gradle
Sally Gradle
24,694 Points

Donald, You are really close. The question is asking us make an exception for anchor tags in the footer, not the ones that are direct children of the paragraph. So, we need to put the ampersand exception in the rule referencing anchor tags.

We also need to tell it that we are talking about the div that has the class .footer. So we just have to type the specific thing we want to style, and then use the ampersand to say, "and also all this stuff before it."

One other tip: use the spacing and indentation that Hampton shows. It makes th code much more readable (and easier to debug) and helps prevent some errors. It looks like you have an extra } in your code above. Below is my solution to the code challenge.

 /* Write your SCSS code below. */
p {
  a {
    color: red;
    div.footer &{
        color: purple;
    }
  }
  > a {
    color: blue;
    &:hover {
      opacity: 0.5;
    }
  }
}
Donald Richmond
Donald Richmond
13,807 Points
Donald Richmond
Donald Richmond
13,807 Points

Thanks, the problem is solved

Evan Agee
Evan Agee
13,088 Points
Evan Agee
Evan Agee
13,088 Points

The ampersand operator is not what what you would want to use in this case, but rather just standard CSS child selector.

.footer p a {
     color: purple;
}
Sally Gradle
Sally Gradle
24,694 Points

Evan, he is working on a code challenge for the Sass course, and the question asks specifically for this.

Donald Richmond
Donald Richmond
13,807 Points
Donald Richmond
Donald Richmond
13,807 Points

Thanks, Evan. The problem is solved!