Descendant selector code challenge is impossible. Please help!

Question

We are supposed to target the paragraph that is a descendant of the footer element. However, all it says in the code is this

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!

Answer 1 · 2015-01-28T21:14:44Z

January 28, 2015 9:14pm

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.

Answer 2 · 2015-01-28T20:47:30Z

January 28, 2015 8:47pm

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.

Answer 3 · 2015-01-28T20:48:49Z

January 28, 2015 8:48pm

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.

Answer 4 · 2015-01-28T21:25:33Z

January 28, 2015 9:25pm

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.

Answer 5 · 2015-01-28T22:25:27Z

January 28, 2015 10:25pm

@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

Answer 6 · 2015-02-04T18:42:46Z

February 4, 2015 6:42pm

footer p { color: slategrey; }

Answer 7 · 2015-01-28T20:56:44Z

January 28, 2015 8:56pm

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.

Welcome to the Treehouse Community

Looking to learn something new?

Micole Noddle

Micole Noddle

Descendant selector code challenge is impossible. Please help!

7 Answers

Wil Goolsby

Wil Goolsby

David Clausen

David Clausen

Wil Goolsby

Wil Goolsby

udslwxmrlw

udslwxmrlw

Micole Noddle

Micole Noddle

Micole Noddle

Micole Noddle

libuvarghese

libuvarghese

Micole Noddle

Micole Noddle

David Clausen

David Clausen