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
Christopher Palacios
3,110 PointsDescendent Selector ? Why is this working:
em{color: red;}
and not
h1 em{color: red;}
?
As a descendent selector should the second example work and not the first. Please advise.
Up date yes this was a code challenge. I got the correct answer. However I did not understand why. Thanks to Grieve for the outline.
2 Answers
Jonathan Grieve
Treehouse Moderator 91,253 PointsIt's slightly complicated than that
Is this a code challenge you're working on?
The way I remember it is that if you have a space between one selector and the other it actually counts as a selector character. An em that is inside a h1. But if you wanted an em element that is a direct descendant of a h1 element, you'd use a > character.
em is far less specific than h1 em because em will lock on to any em in the document.
h1 em will lock onto any em that is inside a h1 element.
but h1 > em would lock onto any em that is a direct descendent of h1.
Jason Anello
Courses Plus Student 94,610 PointsHi Christopher,
Technically, the 1st selector em is selecting the em inside the paragraph but it's also selecting the em inside the h1 which you probably wouldn't want it to do. So I think it probably shouldn't let that 1st selector pass but it's not technically wrong.
Your descendant selector isn't working because you're selecting the em inside the h1 but task 3 is asking you to select the em inside the paragraph.