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!

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 Juan Tejerina
Juan Tejerina
3,443 Points

Sass Final Code Challenge (First Step)

Ok guys, I'm getting a little bit frustrated with this exercise, as I'm aware that I did not understand everything correctly after watching the video for two times now.

I am supposed to do this:

"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."

And this is what I'm typing:

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

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

As I understand, I'm stating that "footer &{" in Sass means "footer p a{". Clearly I'm missing something important here. Any hints on what am I skipping?

Thanks in advance.

P.S: The worst thing is that it shows up correctly on the preview mode, so it is actually working. But the exercise keeps saying I'm wrong...

9 Answers

Syed Mahmoodi
Syed Mahmoodi
4,744 Points
Syed Mahmoodi
Syed Mahmoodi
4,744 Points

if we concentrate on the sentence of the question asked...! it will be easy to write the code. its general practice not to add the div.classname, thats where the problem is

try writing...

p{
    a{
    color:red;
        div.footer &{color:purple;}
        }
    &>a{
       color:blue;
           &:hover{opacity: 0.5;}  
         }  
}
Miriam Tocino
Miriam Tocino
14,201 Points
Miriam Tocino
Miriam Tocino
14,201 Points

Thank you! You saved me some time here with your answer ;)

Syed Mahmoodi
Syed Mahmoodi
4,744 Points
Syed Mahmoodi
Syed Mahmoodi
4,744 Points

you are welcome miriam..! :)

DALE PETERSEN
DALE PETERSEN
6,773 Points

Above gives result: Bummer! There's something wrong with your Sass stylesheet. Please review your code and try again. Sass Error: Invalid CSS after " div": expected ";", was ".footer & {colo..."

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

I am beyond frustrated at this point (atp).

I found my error I needed a semi-colon after "red".

davpay
davpay
40,173 Points
davpay
davpay
40,173 Points 
p {
        a {
    color: red;

    div.footer & {
    color: purple;
            }
        }

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

All links inside p tags are styled red. All links inside the div with a class of .footer are styled purple (the & is talking about the a from above). All direct links of p tags are styled blue with a hover of 0.5 (the &:hover means a:hover because it is the selector immediately above).

I think!

This code passes anyway. :)

DALE PETERSEN
DALE PETERSEN
6,773 Points

Doesn't work for me:

/* Write your SCSS code below. */ p { a { color: red div.footer & {color: purple;} } & > a { color: blue; &:hover { opacity: 0.5; } } } the resulting comment is: Bummer! There's something wrong with your Sass stylesheet. Please review your code and try again. Sass Error: Invalid CSS after " div": expected ";", was ".footer & {colo..."

Juan Tejerina
Juan Tejerina
3,443 Points
Juan Tejerina
Juan Tejerina
3,443 Points

Holy cow!!

That was it Samaydanov. Thanks a bunch for your quick answer and great help.

Chris Scott
Chris Scott
7,673 Points
Chris Scott
Chris Scott
7,673 Points

nvm.. you edit the error statement.. v_v;

The way you have it compiles to

.footer p a {
    color: purple; }

What you need is "a" & ".footer".

a
  color:red
    &.footer
       color:purple

Which compiles to the needed

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

Think of it literally saying if there is a p element with an a and the class is footer

Sam Hainsworth
Sam Hainsworth
4,200 Points
Sam Hainsworth
Sam Hainsworth
4,200 Points

I've having the same problem and ive tried what these comments have said

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

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

it just keeps giving errors any help?

Sam Hainsworth
Sam Hainsworth
4,200 Points
Sam Hainsworth
Sam Hainsworth
4,200 Points

I finally understood the question in the end, but don't really understand the reason for the div. part. Does anyone else have an idea I don't really like doing things without truly understanding them.

Thanks :D

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

It only wants to dive with a class of the future, not "anything" with a class of footer.

If you are confused about writing the CSS selects "divs with a class of footer I'd check out http://css.maxdesign.com.au/selectutorial/selectors_class.htm#combining

If you are wondering why the question asked for something so specific, well that's how it is with CSS (and SCSS) sometimes you need to style something every specific so it's good practice to have questions like that sometimes IMHO.

Marc-Oliver Gern
Marc-Oliver Gern
8,747 Points
Marc-Oliver Gern
Marc-Oliver Gern
8,747 Points

It also took me a few corners to figure it out, since the question is phrased a bit complicated.

Blake Baxendell
Blake Baxendell
16,344 Points
Blake Baxendell
Blake Baxendell
16,344 Points

Had same issue, thanks for the answer, had footer div, that is what the wording sounded like to me.