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 ameshuffle
ameshuffle
8,966 Points

How am I supposed to do this?!

The question asks "Next, target the paragraph that is a descendant of the main-content class. Add a font-weight property and set the value to bold." And I do that and I still get the wrong answer. Is there something I missed?! I'm getting frustrated at this.

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

.main-content {
  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>
Michael Allen
Michael Allen
14,387 Points

Hi Evergas,

I believe you are just missing the "p" just after the class, the rest is good.

Try this and let me know if that resolves the issue.

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

6 Answers

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

It's okay, I can walk you through it.

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

So, we'll start by targeting the paragraph (p) that's a descendant of the main-content class (.main-content). The descendant selector is just a space, so put it all together and you get this:

.main-content p {}

That selector first finds the .main-content class, and then it finds all the paragraphs or p elements within .main-content.

Now you just apply font-weight: bold and you're good to go!

.main-content p {
  font-weight: bold;
}
Ary de Oliveira
Ary de Oliveira
28,298 Points
Ary de Oliveira
Ary de Oliveira
28,298 Points

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

MUZ140742 Takura Masunda
MUZ140742 Takura Masunda
5,737 Points
MUZ140742 Takura Masunda
MUZ140742 Takura Masunda
5,737 Points

header span { font-size: 26px; }

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

header span{ font-size: 26px; }

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

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

Full Challenge 1 2 and 3

header span{ font-size: 26px; }

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

footer p { color: slategrey; }

Dorothy Pollock
Dorothy Pollock
664 Points

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

Gives me the bummer that I need to use bold with font-weight. Bummer! Make sure you're using the 'font-weight' property with the value 'bold'.

I'm sure it's me but I keep staring and am not seeing it.

ADDENDUM: I restarted the editor and the same code took. Must have been some gremlins ;=)

ameshuffle
ameshuffle
8,966 Points
ameshuffle
ameshuffle
8,966 Points

Thank you for your answer, Ryan. How could I have overlooked a simple "p" that stands for paragraph in an element? So embarrassing...

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

It's okay, it happens to everyone. I once spent an hour debugging a website and why my image gallery wasn't working, only to find that I had forgotten to link the CSS file in the head. A five-second fix that I spent an hour looking for. Now that's embarrassing. :)

Don't sweat it; these things happen to everyone, including people who have been doing this for years.

Michael Allen
Michael Allen
14,387 Points

I second Ryan's comment. When you are coding, you are going to miss stuff, we all do. Besides, this is the best place to make those mistakes with a supportive coding community. The more mistakes you make now, the stronger you will be later on.