Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Sass Basics (retired) Getting Started with Sass Advanced Nesting

Edvards Valbahs
PLUS
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

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

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; } } }*/

Hi David,

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

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

Hi David,

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