Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Basics (2014) Basic Selectors Descendant Selectors

Micole Noddle
Micole Noddle
5,797 Points

Descendant 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

Let 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
David Clausen
11,403 Points

descendant 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.

You 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.

Hi!

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
Micole Noddle
5,797 Points

Thank you, Selwyn! That really helps!

Micole Noddle
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

footer p { color: slategrey; }

Micole Noddle
Micole Noddle
5,797 Points

Thank 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
David Clausen
11,403 Points

Can 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