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

CSS CSS Basics (2014) Basic Selectors Descendant Selectors

Posted by Shelby Larson
Shelby Larson
33,317 Points

Descendant Selectors Code Challenge 3/3

Finally, target the paragraph that is a descendant of the footer element. Add a color property and set the value to slategrey.

.header span{ font-size: 26px; }

.main-content p{ font-weight: bold; }

.footer p{ color: slategrey; }

Not sure what's wrong with my code? Is this a glitch?

7 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Shelby,

You only use the dot in front when it's a class name. As in .main-content

header and footer are both html elements and should not have a dot in front of them. Similar to how you did not put dots in front of span or p which are also html elements.

I'm not sure why you were able to pass task 1 but that selector should be header span, no dot

You should be able to pass task 3 if you make the same correction to footer

Raviroyashe Mahere
Raviroyashe Mahere
6,497 Points

thanx,you helped me a lot

Ary de Oliveira
Ary de Oliveira
28,298 Points
Ary de Oliveira
Ary de Oliveira
28,298 Points

Full Challenge ...

header span{ font-size: 26px; }

.main-content p { font-weight: bold; }

footer p { color: slategrey; }

micram1001
micram1001
33,833 Points
micram1001
micram1001
33,833 Points

header and footer are elements and don't require a dot. main-content is a class and does require a dot before it.

/* Complete the challenge by writing CSS below */
header span{
  font-size:26px;
}

.main-content p{
  font-weight:bold;
}

footer p{
  color:slategrey;
}
Ary de Oliveira
Ary de Oliveira
28,298 Points
Ary de Oliveira
Ary de Oliveira
28,298 Points

Challenge Task 1 of 3 Create a descendant selector that targets the span inside the header element. Add a font-size property and set the value to 26px.

Challenge Task 2 of 3 Next, target the paragraph that is a descendant of the main-content class. Add a font-weight property and set the value to bold.

Challenge Task 3 of 3 Finally, target the paragraph that is a descendant of the footer element. Add a color property and set the value to slategrey.

<html> <head> <title>Lake Tahoe</title> <link rel="stylesheet" href="page.css"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <span>Journey through the Sierra Nevada Mountains</span> <h1>Lake Tahoe, California</h1> </header> <p> Lake Tahoe is one of the most <span>breathtaking attractions</span> located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation. </p> <a href="#">Find out more</a> <div class="main-content"> <h2>Check out all the Wildlife</h2> <p> As spawning season approaches, the fish acquire a humpback and protuberant jaw. After spawning, they die and their carcasses provide a feast for gatherings of mink, bears, and Bald eagles. </p> <a href="#">See the Wildlife</a> </div> <footer> <p>All rights reserved to the state of <a href="#">California</a>.</p> </footer> </body> </html>

CSS:

/* Complete the challenge by writing CSS below */

header span { font-size 26px; }

.main-content p { font-weight: bold; }

footer p { color: slategrey; }

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hey Shelby,

Could you post your html and css please, you can do this direct from the challenge and it will paste your code for you or,

Here is a link to explain how to use Markdown to post your code How to post code

If you look at the bottom of the box when your typing a reply you will see Markdown Cheatsheet that will also explain how to post your code.

Hope this helps.

Naya Moss
Naya Moss
9,894 Points
Naya Moss
Naya Moss
9,894 Points

@Jason Anello THANK YOU! helped me solve task 3! i kept putting the period before header.

MUZ140587 Matifadza Foyo
MUZ140587 Matifadza Foyo
9,182 Points
MUZ140587 Matifadza Foyo
MUZ140587 Matifadza Foyo
9,182 Points

footer p { color: slategrey; }