Nesting question Saas

Question

From:

http://teamtreehouse.com/library/advanced-nesting

"Challenge Task 4 of 4

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."

Bummer! Please use the ampersand selector following the selector for the .footer div.

What am I missing?

p {
  a {
  color:red;
  }
  > a {
  color:blue;
  &:hover {
  opacity:0.5;
  }
  .footer & {
  color:purple;
  }
  }
}

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

Answer 1 · 2015-06-22T07:54:06Z

June 22, 2015 7:54am

Hi Darren Joy,

Try this:

p {
  a {
    color: red;
    div.footer & {
      color: purple;
    }
  }
  > a {
    color: blue;
      &:hover {
        opacity: 0.5;
      } 
  }
}

Welcome to the Treehouse Community

Looking to learn something new?

Darren Joy

Darren Joy

Nesting question Saas

1 Answer

Héctor Muñoz

Héctor Muñoz

Darren Joy

Darren Joy