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

Micole Noddle
Micole Noddle
5,797 Points
Posted by Micole Noddle
Micole Noddle
5,797 Points

Doing exactly what Guil instructed and can't pass the challenge?

challenge is asking us to create a descendant selector for the span in the header. Guil had us write a class="title" for the span. Then style the span with a .title in the CSS. I'm doing exactly this and I can't pass the challenge, it's pretty misleading. What am I doing wrong?

style.css 
/* Complete the challenge by writing CSS below */
.title {
  font-size: 26px;
}
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 class="title">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>
mrx3
mrx3
8,742 Points
mrx3
mrx3
8,742 Points

It might be this I could be wrong though

header span{
  font-size: 26px;
}

oops I'm sorry you're on a different deep dive than I'm on. Sorry about that.

Micole Noddle
Micole Noddle
5,797 Points
Micole Noddle
Micole Noddle
5,797 Points

OK, so I went back and rewatched. In the beginning, Guil has us write header span {font-size: 26px;} but then has us change it later. He mentioned this isn't the correct way to do it. I found this incredibly confusing. Anybody able to explain this better for me? Thanks again! Classes, IDs and spans always get me.

3 Answers

udslwxmrlw
udslwxmrlw
8,196 Points

Hi!

It's not recommend because adding a class of header span would apply the style to every other span element nested in header.

Another better approach is giving your span a own specific class name (e.g. title).

The code in your CSS would look like this:

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

This assures that only the span element with the class of "title" and nested in the header element will get the styles (font-size:26px) applied.

Micole Noddle
Micole Noddle
5,797 Points
Micole Noddle
Micole Noddle
5,797 Points

Thanks, Selwyn. Appreciate it. Unfortunately, using that code doesn't allow me to pass the challenge. The only way to pass the challenge is to write the header span. What I don't understand is this: If we are being taught this is not best practice, then why would one of the 3 challenge questions have us write a header span? That makes no sense. I found this challenge to be way off--I don't think it covers the objectives very well at all. I'm now stuck on the last question too, have no idea what they are looking for here. I think this challenge should be rewritten to meet the objectives better.

udslwxmrlw
udslwxmrlw
8,196 Points

Your welcome. I guess it really depends on the exact case. There is no wrong answer between the two ways. Say you know for sure that there will never ever be a second span element in your header, then it's totally okay targeting the span element directly in your CSS. On more complex projects there might be several span elements in your header that you want to style differently. In that case you should give each span element a own class name.

Micole Noddle
Micole Noddle
5,797 Points
Micole Noddle
Micole Noddle
5,797 Points

@Mr. X, you are right, that code is the only way to pass the challenge, but it isn't best practice, so I'm at a loss as to why it's on the challenge at all.

Micole Noddle
Micole Noddle
5,797 Points
Micole Noddle
Micole Noddle
5,797 Points

Thanks again. I'm running into another challenge with this challenge. We have to target the paragraph that is a descendant of the footer element, but we never went over that in the videos. The footer isn't assigned a class, nor is the footer paragraph. I can't figure out how to target the paragraph to style it. Tried several different ways I've researched online and nothing works. I'd like to at least pass this poorly written challenge so I can move on and keep learning...

OK, got it.

footer p {}

but we still never went over it.