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 trialHammad Ahmed
Full Stack JavaScript Techdegree Student 11,910 PointsDifference between Descendant and Child selectors
As Guil told the use of Descendant and Child selectors, there seems no difference between them to me.
3 Answers
jamescool
44,592 PointsImagine four paragraphs nested directly within a div. Both the descendant and child selectors will target these paragraphs. However, if the original div contained another div at the same level of the previously-mentioned paragraphs which contained an additional paragraph, this last paragraph would be targeted by the descendent but not the child selector:
<div class="first">
<p></p>
<p></p>
<p></p>
<p></p>
<div class="second">
<p></p>
</div>
</div>
.first p {
/*** This will target all the <p> elements in the HTML above ***/
}
.first > p {
/*** This will target all <p> elements except the one nested within the "second" class ***/
}
Anthony c
20,907 PointsSo,
descendent = every specified element that follows
and child = only specified elements that very directly follow
Is this right?
jamescool
44,592 PointsYes, I think you've understood correctly. Maybe instead of saying "every specified element that follows" you should say "any element whatsoever that follows" because there is no need to specify anything.
Consider it this way: you're the child of some woman (your mother), but YOUR children wouldn't be considered her children (they would, however, be her descendants).
Dayne Wright
11,235 PointsThis helped me a lot as well. Thanks!
jamescool
44,592 Pointsyou're welcome!
jamescool
44,592 Pointsjamescool
44,592 PointsI've added to my answer. Refresh and check it out. Hope it helps :)
Hammad Ahmed
Full Stack JavaScript Techdegree Student 11,910 PointsHammad Ahmed
Full Stack JavaScript Techdegree Student 11,910 PointsJames, what if the nested div had the class of first then both the descendant and the child selector could be used.
jamescool
44,592 Pointsjamescool
44,592 PointsYes. If the nested div also had the "first" class, there would be no difference between using descendent/child selectors. The same would apply if the divs in question had no class assigned to them; in certain cases, identical results will obtain.
Hammad Ahmed
Full Stack JavaScript Techdegree Student 11,910 PointsHammad Ahmed
Full Stack JavaScript Techdegree Student 11,910 PointsThanks James.
Jake Ford
9,230 PointsJake Ford
9,230 PointsGreat explanation, James!