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

Arturo Goicochea
Arturo Goicochea
8,077 Points

Something wrong?

Ive rewatched the last video, and I think what Im putting in is right for direct children of p that are a to be blue:

p { > a { color: blue; }

a {
color: red;
}

}

Hi Arturo,

Check ot Fernando.

Jeff

3 Answers

Hi Arturo,

I realized you did not get an answer as to why your sass didn't work out. Maybe you already know but it has to do with selector specificity.

The code you tried was reversed from Fernando's code that Jeff linked to.

Both of these selectors p a and p > a have the same specificity. So whichever one comes later has precedence. Combinators do not affect specificity.

In your case, you are correctly setting all direct child links to blue, but then you are setting all links to red that are inside p elements. The direct child links do not remain blue.

So in this case, the order makes a difference.

Arturo Goicochea
Arturo Goicochea
8,077 Points

Jason, you absolutely rock! Thanks for that! 100% clear now.

You're welcome, Arturo.

Jeff is definitely pointing you in the right direction.

Edit: I just added the code here to save time with one slight modification.

p { 
   a {
       color: red;
      }

  &  > a { 
    color: blue;
       } 
}

Hi David,

Why do you have the parent selector in front of the > a Since you are nesting that rule inside the p rule isn't the p parent already implied?

The challenge he linked to actually only asked for

p{
a{
color: red;
}
}

I just added the syntax from thread Jeff linked to above. Which is also correct syntax and seem to be what the OP is referring to.

Arturo Goicochea
Arturo Goicochea
8,077 Points

David, I was actually in the second step, which asks for the direct child selector, to make a red.

I was referring to Angelo's question

David,

Is there a way to link to a specific task on the code challenge?

Jason,

I don't think there is being that most code challenges are in steps. I could be wrong though. If there isn't an option to so maybe you could make a suggestion. I think it'd really help those trying to help in the forums!

I don't think anyone is suggesting that putting the parent selector in front would be wrong or incorrect syntax. The question is why?

It's redundant. If you put it in front of the > a then why not also put it in front of the a rule that's above that one?

My concern is that beginners are going to think they need to do that.

Arturo Goicochea
Arturo Goicochea
8,077 Points

Why is the & necessary? Dont the stacks work that way already? I thought they were used at the end.

Sometimes they're useful in the front. I think there was some task where you write a :hover rule and it becomes useful to put the parent selector in front. Might even be the next task after this one.

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector read this to better understand the usage of "&"