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

Kristof Szilagyi
Kristof Szilagyi
7,431 Points
Posted by Kristof Szilagyi
Kristof Szilagyi
7,431 Points

I need a little help for SASS Stage 1 challenge / task 4

I have problem with the SCSS.

I wrote:

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

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

but it is not passing, however it seems to be working in my browser if I use html and css files with the same codes. The link in my footer is purple when I check it in the browser.

Please, help.

8 Answers

Alex Heil
Alex Heil
53,547 Points
Alex Heil
Alex Heil
53,547 Points

hey kristof, you're actually on the right track. task 4 wants you to specifically add the footer DIV - means the .footer alone won't pass, it wants you to explicitly name div.footer ( just re-did the challenge to check that out ;) )

at the end your code should look like this:

p {

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

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

}

hope that helps and have a nice day ;)

Kristof Szilagyi
Kristof Szilagyi
7,431 Points
Kristof Szilagyi
Kristof Szilagyi
7,431 Points

Thanks Alex! It drove me crazy. Now it is clear. You made my day. :)

Alex Heil
Alex Heil
53,547 Points
Alex Heil
Alex Heil
53,547 Points

you're welcome kristof, great to hear this helped you out ;)

Gloria Dwomoh
Gloria Dwomoh
13,116 Points
Gloria Dwomoh
Gloria Dwomoh
13,116 Points

Oh okay. Due to your code not being markdown some of the icons like.. ">" does not exist where it suppose to be. You did it almost right, since you are nesting the footer selector in the a you have to add "div" before it, as it asks "add an exception for <a> tags that are in the <div> with a class of .footer: those links should be purple. "

so,

p {
   a {
     color: red;
      div.footer & { <!-- added div here -->
      color:purple;
    }
   }
   > a { <!-- fixed the child anchor -->
     color: blue;
     &:hover {
       opacity: 0.5;
     }
   }
 }

I hope this helps.

Gloria Dwomoh
Gloria Dwomoh
13,116 Points
Gloria Dwomoh
Gloria Dwomoh
13,116 Points

The question says...

Use a nested selector to say all <a> tags within <p> tags are red.", which makes me wonder why did you add purple and blue...since it is just the 1st task and it doesn't asks for all that. Try simplifying it, to just what it asks i.e.

p { 
  a {
   color: red; 
    } 
}
Kristof Szilagyi
Kristof Szilagyi
7,431 Points
Kristof Szilagyi
Kristof Szilagyi
7,431 Points

There are four tasks in challenge one. The fourth one is what I cannot solve. I finished the previous 3 tasks.

Kristof Szilagyi
Kristof Szilagyi
7,431 Points
Kristof Szilagyi
Kristof Szilagyi
7,431 Points

The 4th task is.:

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.

Kristof Szilagyi
Kristof Szilagyi
7,431 Points
Kristof Szilagyi
Kristof Szilagyi
7,431 Points

Thank you Gloria for you as well! I had the child anchor selected but for some reasons Treehouse did not display the greater than sign after pasting.

Gloria Dwomoh
Gloria Dwomoh
13,116 Points

No worries. Also, for future reference, if you markdown your code that won't happen. You can read more on how to do that from this post.

Kristof Szilagyi
Kristof Szilagyi
7,431 Points
Kristof Szilagyi
Kristof Szilagyi
7,431 Points

Thank you also for the info how I can paste my code into the forum! It is very useful!

Gloria Dwomoh
Gloria Dwomoh
13,116 Points

You are welcome Kristof.

Sharon Smith
Sharon Smith
8,747 Points
Sharon Smith
Sharon Smith
8,747 Points

Thank you both, Alex & Gloria! And thank you, Kristof, for asking the question, too!!

I've been fighting with that exact same problem for the last two hours! I even went through the SVG files for both videos trying to figure out where he'd described the process & was getting ready to post about it myself. Then I found this.

In my case, what I missed was that the div.footer & went under the original a & not in a new tag by itself. Basically, I confused it with CSS styling. 'Cause I'm a dork like that.

Gloria Dwomoh
Gloria Dwomoh
13,116 Points

You are welcome Sharon, it's great you found the bug.