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) Enhancing the Design With CSS Text Shadows and Box Shadows

Posted by Glass Blade
Glass Blade
3,677 Points

What is wrong with my code

Can a css rule be nested in another rule

style.css 
/* Complete the challenge by writing CSS below */
.main-heading {
  h1 {
   text-shadow: 0px 0px 5px #be7b31;
  }
}
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 id="top" class="main-header">
      <span class="title">Journey Through the Sierra Nevada Mountains</span>
      <h1 class="main-heading">Lake Tahoe, California</h1>
    </header>

        <div class="primary-content">
            <p class="intro">
                Lake Tahoe is one of the most breathtaking attractions 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 class="callout" href="#more">Find out more</a>
        </div><!-- End .primary-content -->

        <footer class="main-footer">
            <p>All rights reserved to the state of <a href="#">California</a>.</p>
            <a href="#top">Back to top &raquo;</a>
        </footer>
  </body>
</html>

3 Answers

Craig Fender
Craig Fender
7,605 Points
Craig Fender
Craig Fender
7,605 Points

I believe you need a CSS preprocessor (SASS or LESS) to handle something like nesting with CSS. Otherwise, use descendant or child selectors:

Descendant selector that selects all <h1> tags within the class .main-heading:

.main-heading h1 { ... }

Child selector that selects only <h1> tags immediately nested within class tag, instead of <h1> tags nested within other tags within the class .main-heading:

.main-heading > h1 { ... }

On another note, you don't need to select both the class name (main-heading) and the <h1> tag since they're one and the same in the example provided. You only need to use the class-name. Or else try this: .main-header > h1 { ... }.

I hope that helps.

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

:point_right: For task 1 of the challenge, your objective is to target only the main-heading class. You probably noticed that this class is used on an h1 element, but the element tag name won't be part of the selector you make for the challenge.

:white_check_mark: Craig is right that ordinary CSS does not process nested selectors (other than media queries). But...

:warning: Craig's description of how the selectors work is not quite correct. A selector like this:

.main-heading > h1

...would target h1 elements that are a child of another element with class main-heading. If you want to target an h1 that has that class itself, the selector would be:

h1.main-heading

Similarly, a descendant selector like:

.main-heading h1

...also doesn't target h1's with the class main-heading, it targets h1's that are inside an element with that class.

Craig Fender
Craig Fender
7,605 Points
Craig Fender
Craig Fender
7,605 Points

Steven Parker,

My understanding of how the selectors work seems to fit what you're saying, so maybe I didn't explain it well enough. But my point wasn't to use the selectors to highlight both the h1 tag and the class main-heading. I suggested just using the class name since they affect the same tag. Or make that an id for the h1 tag if you're only going to use it once per page. Regardless, your suggestion to use h1.main-heading would work well too, and maybe it works best for this exercise. I don't know since I haven't taken this course.