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 Lara Jackson
Lara Jackson
916 Points

I'm not getting this

Create a descendant selector that targets the span inside the header element. Add a font-size property and set the value

style.css 
/* Complete the challenge by writing CSS below */
<span class="primary-content t-border"> ... </span>
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 
     <header span {
        font-size: 26px
       }</header>
           <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>

2 Answers

Armin Kadic
Armin Kadic
16,242 Points
Armin Kadic
Armin Kadic
16,242 Points

Ok so first of you shouldn't change anything in the index.html file, only the style.css file. Now the point is to target the SPAN that is a descendant of the HEADER element, you do this by typing header because that is the parent element and then separate with a space and target the span element because it's a descendant of HEADER. You do the same thing with the P element that is a descendant of the main content class. You target classes with a dot in front of the class name, so .main-content, and then you separate with a space and write the p, just like the first challenge. The third challenge I won't write, I hope you figure it out.

Good luck!

header span { font-size: 26px; }

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

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Defining a simple descendant selector is a simple as defining the parent element followed by the element inside that element that you want to target. That's what descendent means in this case. It is an element that is descended from its parent

header span {
   /*css*/
}

Where span is the descendant element you wish to target.

Now, you'll get the hang of this eventually but you'll learn that there are various ways to define CSS. You got a little confused in your attempt in that it looks like you tried to start by writing a <header> element and then putting your CSS inside it. You could if you wanted to write inline CSS like this

<style>  

    header span {
       font-size: 26px
   }

</style>

But it's best to put it in a separate file which you'll link to in your HTML document.

Hope this helps. Good luck and happy coding! :)