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

HTML

Heidi S Wolff
Heidi S Wolff
12,757 Points
Posted by Heidi S Wolff
Heidi S Wolff
12,757 Points

Sass-Web Design Track-Code Challenge

My original post got accidentally deleted. I'm having trouble with questions 2 and 3 in the code challenge for advancing nesting. I'm writing the code exactly how it's shown in the instructional video. When I retry the quiz, the answer I give on question 2 is correct one day and incorrect the next day and I'm coding it the exact same way. I can't get question 3 to work at all and I'm copying exactly what is done in the video. I'm doing the quizzes from my laptop.

https://teamtreehouse.com/library/advanced-nesting

5 Answers

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Heidi,

The problem here is a simple misunderstanding of what the challenge is asking; you're very close to having the answer!

You've made it past step 1: give all a tags within p tags the color red -

p {
    a {
        color: red;
    }
}

Step 2: They want you to then make the color of all direct 'a' descendants of 'p' tags blue, which you'd done:

p {
    a {
        color: red;
    }

    > a {
        color: blue;
    }
}

Now the miscommunication comes in: for Step 3, they don't want you to remove the direct descendant selector, they want you to add the &:hover inside of that selector! The exercise here reinforces the fact that using Sass/SCSS helps to keep your code DRY :)

Hopefully this makes sense; your code of:

p { 
    a { 
       color: red; 
       &:hover { 
           opacity: .5; 
        } 
    } 
}

...is very close! Just don't remove the > a {color: blue;} selector that you had before, and nest the &:hover within that selector instead. Also, I think this challenge is looking for you to write exactly 'opacity: 0.5;' and thus may not accept 'opacity: .5;'.

Hope this helps!

Erik

Heidi S Wolff
Heidi S Wolff
12,757 Points
Heidi S Wolff
Heidi S Wolff
12,757 Points

Thank you Erik. Some of the code challenge questions are not written very clearly.

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

NOTE that now, after the recent Challenge updates, it doesn't want you need to delete the > a rule, but rather, they want you to add the ampersand selector rule inside of that, as follows:

p {
  a {
    color: red;
  }

  > a {
    color: blue;
    &:hover {
      opacity: 0.5;
    }
  }
}
Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Heide,

Can you post the code that you're trying that isn't passing, so that we can help you debug and figure out what's going on?

Erik

Oswaldo Vázquez
Oswaldo Vázquez
7,806 Points
Oswaldo Vázquez
Oswaldo Vázquez
7,806 Points

not sure if it's the same but similar error

#menu ul {



      li {
        @media screen and (max-width : 500px) {
          text-align: center;
        }
      }




}
Oswaldo Vázquez
Oswaldo Vázquez
7,806 Points
Oswaldo Vázquez
Oswaldo Vázquez
7,806 Points

this worked, no idea why

´´´ ul li {

    @media screen and (max-width : 500px) {
      text-align: center;
    }

}

´´´

Heidi S Wolff
Heidi S Wolff
12,757 Points
Heidi S Wolff
Heidi S Wolff
12,757 Points

Treehouse Moderators:

Please assist me. Thank you. Here's the question, what it says is wrong when I submit my answer and my code:

Challenge task 3 of 4 We want to add a style to our previous Sass code declaring that on hover, all direct <a> children have an opacity of 0.5. Use the ampersand selector to achieve this, rather than repeating the > a direct child selector.

Bummer! You need to set 'opacity: 0.5' for the hover pseudoclass.

/* Write your SCSS code below. */ p { a { color: red; &:hover { opacity: .5; } } }

p { > a { color: blue; } }

MUZ140018 Sibusisosenkosi Moyo
MUZ140018 Sibusisosenkosi Moyo
8,693 Points
MUZ140018 Sibusisosenkosi Moyo
MUZ140018 Sibusisosenkosi Moyo
8,693 Points

p { a { color: red; }

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