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

Jon Gosling
Jon Gosling
9,507 Points
Posted by Jon Gosling
Jon Gosling
9,507 Points

Stuck on easy peasy Sass challenge task...

I need a little bit of help on a challenge task... I think I did what the question asked but maybe I missed something?

The question was: 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.

My code response was:

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

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

and it seemed to do what was asked for (to select the last anchor tag in the footer and set its color property to purple). I also achieved the same outcome when I put the ".footer &" selector inside the direct descendent selector but this didn't seem to be accepted by the code parser either. Did I miss something?

p.s. the 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>

2 Answers

Jon Gosling
Jon Gosling
9,507 Points
Jon Gosling
Jon Gosling
9,507 Points

I just answered my own question after 30 mins :-/

the code parser was looking for the div tag explicitly so the following code worked:

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

  & > a {
    color: blue;
    &:hover {
      opacity: 0.5;
    }
    div.footer & {
        color: purple;
    }
  }
}
Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

That question is oddly specific about the div!

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Jon Gosling & Tom Bedford -

> the code parser was looking for the div tag explicitly

Since the question specifically mentioned <div> then challenge checked that you followed that specific instruction. Due to how specificity works, sometimes that exactly how you need to select an element.

In the real world, you want you CSS (or SCSS) to be as specific as necessary but no more so, I can easily think of real world situations where I've combined an element and class selector to get the desired level of specificity.

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

Hi James, I find it more odd in terms of placement during the Sass course. Loads of people have become stuck due to this question (I seem to get emails every few days from my answers in another threads being upvoted).

You are expecting the challenge to be testing you on Sass nesting and using the & selector, which most people are able to get correct. When the challenge says you are wrong you assume it's something to do with your Sass when it's actually to do with the CSS specificity.

It is a good lesson in reading the question though!

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Tom Bedford -

> I find it more odd in terms of placement during the Sass course

I agree, I refered to this very code challenge as unintentionally tricky in this thread yesterday.

Joseph Ledford
Joseph Ledford
5,057 Points
Joseph Ledford
Joseph Ledford
5,057 Points

I did mine with a space between div and the class footer and it said it was wrong but when I put a space it worked. I just want to know why if a compiler doesn't read spaces if there or not.