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

Darren Franks
Darren Franks
1,006 Points
Posted by Darren Franks
Darren Franks
1,006 Points

Please help! how do i target the paragraph that is a descendant of the main-content value to bold? thank you!

i cant seem to grasp this but how do i make the paragraph font-weight bold?

style.css 
/* Complete the challenge by writing CSS below */

header span {
  font-size: 26px;
}

main-content 
p {
  font-weight: bold;
}
index.html 
<!DOCTYPE html>
<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>

6 Answers

edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Hi Darren,

If you've written exactly what you wrote - "main-content" { "p" font-weight: bold; } - that's the wrong structure.

It should be -

element {
   property: value;
}

So, you target the element you want to add a style to, then within the curly braces define the style.

Because you are targeting an element within an element (the "p" within the "main-content"), you first write outer element, then a space, then the second element.

This code should work -

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

Hope that's a clear enough explanation. All the best.

Ede

edeharrison
seal-mask
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points
edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Hi Darren,

When targeting a class of a div (like "main-content" in this case) you need to precede it with a "." in the css. 

.div-class {
   color: white;
}

It is only with pre-defined tags - such as "header", "p", "body" - that you do not need to precede them with anything.

header {
   color: white;
}

And on a side note, if you are targeting the id of a div, you would precede it with a "#" in your css.

#div-id {
   color: white;
}

So, your answer was really close, just add a "." before "main-content".

Hope that helps,

Ede

Darren Franks
Darren Franks
1,006 Points
Darren Franks
Darren Franks
1,006 Points

Hi Ede OH i see, i cant thank you enough! I tried nearly everything i know before i ask it! Thank you so much my dear, have a lovely day!

edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

No problem! Don't forget to mark it as answered so it's easier for people to find.

Have a great day too!

Darren Franks
Darren Franks
1,006 Points
Darren Franks
Darren Franks
1,006 Points

Hi i'm still having the same trouble i have written,

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

Darren Franks
Darren Franks
1,006 Points
Darren Franks
Darren Franks
1,006 Points

Hi Ede the code i wrote was

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

the qusetion its asking me is: Next, target the paragraph that is a descendant of the main-content class. Add a font-weight property and set the value to bold

Darren Franks
Darren Franks
1,006 Points
Darren Franks
Darren Franks
1,006 Points

Thank you Ede its working now i dont know what came over me.. I think i need to slow down and take it in a bit more than i am doing! I am a bit addicted to all this i love it, so much so im not getting a break from it! lol