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
Steven Prescott
19,206 PointsSass Advanced Nesting code challenge.
This question is killing me:
Add another nested selector which makes all a tags that are direct children of p tags blue.
My Code:
/* Write your SCSS code below. */
p {
> a {color: blue;}
a {color: red;}
}
.EDIT: Here's a link to the challenge: http://teamtreehouse.com/library/advanced-nesting
9 Answers
Guil Hernandez
Treehouse TeacherYou are correct, James Barnett. It's not a validator bug, as both produce different results. Our CodePen tests demonstrate the differences. :)
Steven Prescott
19,206 PointsI figured it out. They wanted the two tags reversed. Ridiculous.
James Barnett
39,199 PointsThat seems like an overly specific check of the code challenge engine, I'd say it's a bug. It would be awesome if you could send an email to Treehouse support team help@teamtreehouse.com to let them know what you found so they can get this fixed.
Steven Prescott
19,206 PointsWill do James. Thanks!
izelnakri
25,803 Points3 months passed and the validator bug is still there. James Barnett & Guil Hernandez, Steven Prescott 's code should pass!
James Barnett
39,199 PointsSo I looked over the code again, I don't think it's a validator bug after all. Instead, I think the question is unintentionally tricky due to how the cascade works.
Check out the [test case on codepen](: http://codepen.io/jamesbarnett/pen/yhiqH), I might be mistaken.
p a & p > a have the same specificity so given the nature of the cascade depending on whichever rule comes last that will be the one applied.
Tagging Hampton Catlin & Guil Hernandez on this one.
izelnakri
25,803 PointsYou are right. I've been writing sass for more than a year but never experienced such a use case, intuitively it feels like p > a should be higher in the CSS Specifity. However that is a nice question to ask in a higher level actually.
- Classes, attributes and pseudo-classes (# of class selectors). This group includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
- Elements and pseudo-elements (# of Element (type) selectors). Including for instance :before and :after.
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
I guess that was just against "my" principle of least astonishment. Apparently, pseudo-classes are more specific than pseudo-elements. Sorry for that.
Steven Prescott
19,206 PointsI'm glad to see this resolved, but can we update the question for more clarity. Better yet, can you leave a more specific error message if this mistake is made? It seems like several people have had trouble with this. -Steven
Samuel Johnson
9,152 PointsI just had the same problem and thought it was my fault!! hopefully it gets updated for future treehouse peeps!!
James Barnett
39,199 PointsUpdated how exactly? You mean to change the question to remove the added degree of difficulty from the specificity.
Rick Metzger
1,876 PointsI had the same problem.
This will pass:
/* Write your SCSS code below. */
p{
a{
color: red;
}
> a {
color: blue;
&:hover{
opacity: 0.5;
}
}
}
Rick Metzger
1,876 PointsWhile this will not:
/* Write your SCSS code below. */
p{
> a {
color: blue;
&:hover{
opacity: 0.5;
}
a{
color: red;
}
}
James Barnett
39,199 PointsRick Metzger - That's some really good detective work. You should pass this along to Treehouse support (help@teamtreehouse.com) so they can send it along the appropriate developer and get this issue fixed.
Guil Hernandez
Treehouse TeacherHey Rick Metzger,
Both answers produce different results. You were also missing a } before a {color: red;}.
Take a look at the CodePen example. Uncomment / comment out a section to see both results.
Steven Prescott
19,206 PointsYes