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 trialMicole Noddle
5,797 PointsDescendant selector code challenge is impossible. Please help!
We are supposed to target the paragraph that is a descendant of the footer element. However, all it says in the code is this
<footer><p>All rights reserved to the state of <a href="#">California</a>.</p>
</footer>
We never went over this (at least I don't think so). If I try to add a class myself and then style it in CSS, it won't pass the challenge. I have no idea what they're looking for here.
Any help would be greatly appreciated. Thanks!
7 Answers
Wil Goolsby
8,593 PointsLet me see if I can help you understand a little more.
<footer>
<p>This p element is contained within the footer element.</p>
</footer>
Given the code above you'll see I have a footer
element that contains a p
element. Now, the p
element is a child of this footer
element so you would just select it with
footer p { }
Another example that is a little more complicated follows:
<footer>
<h1>This h1 element is contained within the footer element.<h1>
<h2>This h2 element is contained within the footer element.<h2>
<p>This p element is contained within the footer element.</p>
</footer>
Given this code you have a parent element: footer`` with 3 child elements:
h1,
h2,
p```. You could use a descendant selector to select any of these by doing the following.
footer h1 { }
footer h2 { }
footer p { }
All 3 of these are descendant selectors. The first selects all h1
elements that are children of a footer
element. The 2nd selects all h2
elements that are children of a footer
element. The final selector will select all p
tags that are contained within a footer
element.
To take it even 1 step further:
<footer>
<ul>
<li>List item</li>
</ul>
<p>This is a paragraph</p>
</footer>
To use a descendant selector to select the li
element you could do the following:
footer ul li { }
footer p
This will select all li
elements contained within ul
elements contained within footer
elements. Yo could still use the footer p
descendant selector to select all of the p
elements contained within footer
elements.
I hope this helps you understand the descendant selector.
David Clausen
11,403 Pointsdescendant selectors is simply selecting a child of a parent. You've seen it, just the terminology getting you. So the 'p' that you want to target is the child of 'footer'.
footer p {
color: #fff;
}
so you target with spaces, so a child <p> of a class would be
.class p {
color:#fff;
}
so you could have a child of a child like in a list,
ul li p {
}
Which is selecting parent ul's child li, and li's child p.
Hope that helps clear up the concept. You should be able to pass your quiz now.
Wil Goolsby
8,593 PointsYou can directly target the element. The challenge provides you with code setup like follows:
<footer>
<p>All rights reserved to the state of <a href="#">California</a>.
</p>
</footer>
the footer element contains a p element that can be targeted with a descendant selector as follows:
footer p {
}
CSS does not require a class to target, you can target html elements.
udslwxmrlw
8,196 PointsHi!
A descendant selector always targets a child of a parent element. e.g.
<div class="parent">
<p>Hi! I'm the child of parent</p>
</div>
So if you're wanting to target the paragraph tag which is nested in a div with the class name "parent" you would do this like this.
.parent p {
/* Your Styles */
}
You could also achieve the same result doing this
<div class="parent">
<p class="child">Hi! I'm the child of parent</p>
</div>
The CSS would be:
.child {
/* Your Styles */
}
This would now target all elements in your html with the class "child". But what if you have several elements assigned the class "child" and only want to target one specific element ? That's when descendant selectors come in handy.
.parent .child {
/* Your Styles */
}
Descendant selectors don't only work targeting html tags but also classes.
On big projects style sheets can get very long with tons of classes. To avoid having to give each element a own class, descendant selectors are a great way of targeting elements in a specific parent element. It makes your stylesheet cleaner and easier to read.
Hope i didn't confuse you more.
Micole Noddle
5,797 PointsThank you, Selwyn! That really helps!
Micole Noddle
5,797 Points@David, I'm referencing the Descendant Selectors video and challenge/quiz portion of "Basic Selectors" in the "Basic CSS" course.
links (first one is the video, second one is the challenge:
http://teamtreehouse.com/library/css-basics-2/basic-selectors/descendant-selectors-3
http://teamtreehouse.com/library/css-basics-2/basic-selectors/descendant-selectors-2
libuvarghese
10,211 Pointsfooter p { color: slategrey; }
Micole Noddle
5,797 PointsThank you David and Wil. That makes sense, and now I know how to do it in the future. I'm annoyed that we never covered that in the lessons. I'm not here to rack up points or just breeze through challenges, I actually want to learn! I use the quizzes to help me with my areas of weakness, and, it's hard going into a quiz when we are asked something we weren't taught. Very frustrating. Descendant selectors aren't easy!
footer p {}
` worked, it would not let me assign anything a class. That doesn't help with terminology, unfortunately.
David Clausen
11,403 PointsCan you link me to the class your referencing. I have already ran into them discussing this in the CSS basics. Maybe you missed something or your taking a different course and am intrigued. Thanks