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

Edvards Valbahs
PLUS
Edvards Valbahs
Courses Plus Student 23,881 Points
Posted by Edvards Valbahs
Edvards Valbahs
Courses Plus Student 23,881 Points

Sass Basics: Objective 4

I can't figure out what is wrong with the scss (or what I'm missing)? Do I need to remove Entry and Content classes (may be structure of the scss is wrong)? Thanks for any help

Objective 4: 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.

HTML: I can't paste Html doc directly into forum :( (link to Ob. 4 index.html: http://teamtreehouse.com/library/advanced-nesting)

My SCSS: /* Write your SCSS code below. / /.entry { > a { color: red; } .content { p { color: red; > a { color: blue; &:hover { opacity: 0.5; } div.footer & { color: purple; } }
}
a { color: red; }
} }*/

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Edvards,

I think that you are making this more complicated than it needs to be. The instructions do not reference the "content" and "entry" classes and so you don't need to use them.

They mostly want you to use type selectors with the exception of div.footer

I recommend that you start over and take the instructions literally. Post back here if you still end up getting stuck on task 4.

To help you get started, here's the instructions for task 1:
Use a nested selector to say all <a> tags within <p> tags are red.

So really all you should have for task 1 is:

p {
    a {
        color: red;
    }
}

This is a literal translation of the instructions.

You should only have to set the color to red one time.

See if you can work off of that and get back up to task 4.

Edvards Valbahs
Edvards Valbahs
Courses Plus Student 23,881 Points
Edvards Valbahs
Edvards Valbahs
Courses Plus Student 23,881 Points

Hi Jason,

Thank You for your help. I started over and successfully completed the challenge :). Solution to Objective 4 is:

/*a { color:red; }

p {

a { color:blue; &:hover { opacity: 0.5; } div.footer & { color: purple; } } }*/

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi David,

As the scss is currently written, I think that's going to compile to:
.entry .content p > a.footer

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I don't believe it's possible to fix this selector without simplifying or restructuring the code because it is nested within the .entry div within the .content div and the .footer div is a sibling to the .entry div.

Edit: I should add that there isn't anything wrong with the original selector but it matters where it is and the overall structure.

This is what task 4 is looking for:

div.footer & {
        color: purple;
    }
Edvards Valbahs
Edvards Valbahs
Courses Plus Student 23,881 Points
Edvards Valbahs
Edvards Valbahs
Courses Plus Student 23,881 Points

Hi David,

I tried "&.footer", but without success :(. Thank You :).