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
simon lavery
17,485 Pointssass 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 ?
3 Answers
Jason Anders
Treehouse Moderator 145,860 PointsHey 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! :)
Jason Anello
Courses Plus Student 94,610 PointsHi 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.
simon lavery
17,485 PointsThanks Jason
Hadiza Oyoko
6,875 PointsDear 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
simon lavery
17,485 Pointssimon lavery
17,485 Pointsexcuse the formatting seems to pick and choose when it actually works, used the backticks but it only formatted half the question