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

sass nesting

The question says i need to add an extra tag to select the direct child of the <p> tag but this isnt working ?

p {
   > a {
     color: blue;
    }
    a {
      color: red;
    }
}

Is this nested wrong ?

excuse the formatting seems to pick and choose when it actually works, used the backticks but it only formatted half the question

3 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points

Hey Simon,

Kind of fixed the formatting for the code in the forum... Sass is sometimes weird when posting.

You've got it pretty much correct, except you forgot to reference the parent selector using the '&' symbol.

p {
  a {
    color: red;
  }
  & > a {
    color: blue;
  }
}

Keep Coding! :)

Hi Jason,

The '&' is redundant in this case because the default behavior is to put the parent in front. It's similar to how you don't need to do '& a' for the first selector. The p will be automatically placed in front with a space between.

The real problem was the order of the rules which you did correct in your code. In the original code, if you make direct child links blue, then you make all links red, you've overwritten the blue ones.

In your code, you're making all links red first then overriding the direct child ones and making them blue. Descendant links that are not direct children remain red.

Thanks Jason

Hadiza Oyoko
Hadiza Oyoko
6,875 Points

Dear Simon,

remember the cascading rule. because of how you placed your rules, the rule for all links should be colored red is overriding the rule for all direct child links to be blue. you need to place the rule for direct child beneath the rule for all links red like so.

p { a { color: red;
} > a { color: blue; } }

hope this helps