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

Posted by Aristides Staffieri
Aristides Staffieri
14,346 Points

Sass "&" selector

I've been stuck on this for a day or so, anyone see the problem?

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.

Code: /* Write your SCSS code below. */

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

p {

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

18 Answers

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

I had problems submitting answers due to timeouts but when it was working I passed with:

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

This outputs the following css:

p a {
  color: red;
}
div.footer p a {
  color: purple;
}
p > a {
  color: blue;
}
p > a:hover {
  opacity: 0.5;
}
Tony Li
Tony Li
976 Points
Tony Li
Tony Li
976 Points

why no need have ; after purple in sass file?

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

It is needed, I have corrected it. Congratulations no one found that for ~4 months.

jesdavpet
jesdavpet
21,489 Points
jesdavpet
jesdavpet
21,489 Points

Same, same.

On question 4/4 I was also getting a timeout error, and couldn't pass the challenge even though the Sass code I was using did result in the correct style being applied to the HTML. Confusing!

I was selecting with .footer & {} when I had the error, but tried div.footer & {} instead (as suggested by Tom Bedford above) -- and it worked. Perhaps, I misunderstood the question as it was phrased.

Daniel Gregory
Daniel Gregory
3,956 Points
Daniel Gregory
Daniel Gregory
3,956 Points

I think I'm missing something, if the Sass code is:

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

that makes the css:

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

Why should you have to add the div prefix to the .footer to pass the code challenge even though when the code is copied into sublime and viewed in a browser it works?

Jay Hori
Jay Hori
554 Points
Jay Hori
Jay Hori
554 Points

I really still do not understand why we needed to write div.footer instead of .footer. My understanding is that we can always ignore div when referring a class. Can someone explain this?

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

Hi Jay

The question specifically asks you to style divs with a class of footer. Not "anything" with a class of footer. It's all about specificity.

/* this styles anything with a class of footer */

.footer {
  color: purple;
}

/* this will only style divs with a class of footer */

div.footer {
  color: purple;
}
Steve N. Peralta R.
Steve N. Peralta R.
31,097 Points
Steve N. Peralta R.
Steve N. Peralta R.
31,097 Points

Referencing Parent Selectors: &

Sometimes it’s useful to use a nested rule’s parent selector in other ways than the default. For instance, you might want to have special styles for when that selector is hovered over or for when the body element has a certain class. In these cases, you can explicitly specify where the parent selector should be inserted using the & character. For example:

a { font-weight: bold; text-decoration: none; &:hover { text-decoration: underline; } body.firefox & { font-weight: normal; } }

is compiled to:

a { font-weight: bold; text-decoration: none; } a:hover { text-decoration: underline; } body.firefox a { font-weight: normal; }

From: Sass reference

Carlos E. Quiroz Rojas
Carlos E. Quiroz Rojas
15,278 Points
Carlos E. Quiroz Rojas
Carlos E. Quiroz Rojas
15,278 Points

:P yeah Thank Y try after I my post I pass allready and I see the error

Thank you Steve !!

Drew S
Drew S
34,034 Points
Drew S
Drew S
34,034 Points

I was just about to write in about this.

I have the same exact code, and confused to why it isn't passing.

Aristides Staffieri
Aristides Staffieri
14,346 Points
Aristides Staffieri
Aristides Staffieri
14,346 Points

Do you also get an error instead of a fail when you submit Andrew?

Drew S
Drew S
34,034 Points
Drew S
Drew S
34,034 Points

Do you mean a Timeout Error? Yeah, that's been happening to me. On the last part of the code challenge I will try to submit the code, and it shows the error message saying my code is invalid the first time. If I try and send it through again I get a Timeout Error. So I'm having to redo the entire code challenge.

tji
tji
1,707 Points
tji
tji
1,707 Points

Me too.. Can't pass this one..

Nathan Smith
Nathan Smith
9,252 Points
Nathan Smith
Nathan Smith
9,252 Points

I had the same time out issue, and had to redo the whole test a few times. I was able to pass by getting all the questions right on the first try.

Carlos E. Quiroz Rojas
Carlos E. Quiroz Rojas
15,278 Points
Carlos E. Quiroz Rojas
Carlos E. Quiroz Rojas
15,278 Points

Nope I have the same code and the same issue an I try also this

Code: /* Write your SCSS code below. */

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

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

Code: /* Write your SCSS code below. */

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

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

what is the errorr

Steve N. Peralta R.
Steve N. Peralta R.
31,097 Points
Steve N. Peralta R.
Steve N. Peralta R.
31,097 Points

Look at the best answer at the top. From Tom. The code must be nested at the same way.

Dalibor Nikolic
Dalibor Nikolic
5,283 Points
Dalibor Nikolic
Dalibor Nikolic
5,283 Points

I still can't seem to pass that and I've followed what tom wrote...This is the error text i get "Within the '.footer' div, 'a' tags that are within 'p' tags should be purple."

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

Timothy Crandall
Timothy Crandall
4,354 Points

You have to remove .entry and .content classes, because they do not apply to the a's in the footer class.

Jay Hori
Jay Hori
554 Points
Jay Hori
Jay Hori
554 Points

Hi Tom- That is precisely what I was missing. Thank you!

Brian Kerr
Brian Kerr
5,787 Points
Brian Kerr
Brian Kerr
5,787 Points

Thank you! So happy I wasn't the only person having trouble with this one.

Steve Baek
Steve Baek
6,939 Points
Steve Baek
Steve Baek
6,939 Points

Thanks Tom. I was having the same problem as everyone else.

mark kling
mark kling
5,504 Points
mark kling
mark kling
5,504 Points

that was the worst piece since "functions."

Sophie Rapoport
PLUS
Sophie Rapoport
Courses Plus Student 6,304 Points
Sophie Rapoport
Sophie Rapoport
Courses Plus Student 6,304 Points

One other thing to pay attention to - div .footer and div.footer are not the same thing. My code didn't pass until I removed the space from the selector, and now that I think of it this makes sense. div .footer selects all elements with class .footer nested inside a div, but div.footer selects all divs with the class footer. I hope that helps others who get stuck on this question!