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
Arturo Goicochea
8,077 PointsSomething 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;
}
}
3 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi 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
8,077 PointsJason, you absolutely rock! Thanks for that! 100% clear now.
Jason Anello
Courses Plus Student 94,610 PointsYou're welcome, Arturo.
David Tonge
Courses Plus Student 45,640 PointsJeff 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;
}
}
Jason Anello
Courses Plus Student 94,610 PointsHi 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?
David Tonge
Courses Plus Student 45,640 PointsThe 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
8,077 PointsDavid, I was actually in the second step, which asks for the direct child selector, to make a red.
David Tonge
Courses Plus Student 45,640 PointsI was referring to Angelo's question
Jason Anello
Courses Plus Student 94,610 PointsDavid,
Is there a way to link to a specific task on the code challenge?
David Tonge
Courses Plus Student 45,640 PointsJason,
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!
Jason Anello
Courses Plus Student 94,610 PointsI 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
8,077 PointsWhy is the & necessary? Dont the stacks work that way already? I thought they were used at the end.
Jason Anello
Courses Plus Student 94,610 PointsSometimes 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.
David Tonge
Courses Plus Student 45,640 Pointshttp://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector read this to better understand the usage of "&"
Jeff Busch
19,287 PointsJeff Busch
19,287 PointsHi Arturo,
Check ot Fernando.
Jeff