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 Basic Selectors Descendant Selectors

Jason Rich
seal-mask
.a{fill-rule:evenodd;}techdegree
Jason Rich
Front End Web Development Techdegree Student 10,048 Points
Posted by Jason Rich
.a{fill-rule:evenodd;}techdegree
Jason Rich
Front End Web Development Techdegree Student 10,048 Points

I've triple checked but my "#education h3" descendent selector style is not being applied. What am I missing?

Here is what I have entered in the Education <section> of index.html:

,,,HTML

  <section>
    <h2 id="education">Education</h2>          
    <ul>
      <li>
        <h3><a href="https://teamtreehouse.com">Treehouse</a></h3>
        <p>Front End Web Development Techdegree</p>
        <p class="date special">Graduated January 2020</p>
      </li>
    </ul>
  </section>

,,,

I can't seem to find a proper way to post the CSS declaration block like the HTML code. Here's the best I could do. (no quotes in actual block)

"#education h3 {

font-family: Arial, sans-serif;

font-size: 32px;

}"

I've copy/pasted the "#education h3" styling to some of the other classes and IDs and it changes the font and sizing correctly, but I am not seeing any change to the <h3> element in the Education <section> of the page.

I've re-watched the video to double check. I've looked through the other CSS blocks to see if something may be conflicting but I am stumped.

Any help would be appreciated.

1 Answer

Cameron Childres
Cameron Childres
11,817 Points
Cameron Childres
Cameron Childres
11,817 Points

Hi Jason,

In your HTML the ID is applied to the <h2> tag, which then closes and has no children. The descendent selector "#education h3" is looking for an <h3> element that is a child of an element with the "education" ID.

In the video notice that he applies the ID to the section tag instead of the <h2> tag. <h3> is a child of <section>, which makes the descendent selector valid:

<section  id="education">
    <h2>Education</h2>          
    <ul>
      <li>
        <h3><a href="https://teamtreehouse.com">Treehouse</a></h3>
        <p>Front End Web Development Techdegree</p>
        <p class="date special">Graduated January 2020</p>
      </li>
    </ul>
  </section>

And a tip for posting code in the forums -- use 3 backticks instead of commas, like this:

```css
#education h3 {
font-family: Arial, sans-serif;
font-size: 32px;
}
```

This will display as:

#education h3 {  
  font-family: Arial, sans-serif;  
  font-size: 32px;  
}

You can replace "css" with whatever language your code is written in. Additionally you can check the "markdown cheatsheet" linked below the comment box for more markdown examples.

Hope this helps! Let me know if you have any questions.

Jason Rich
seal-mask
.a{fill-rule:evenodd;}techdegree
Jason Rich
Front End Web Development Techdegree Student 10,048 Points
Jason Rich
.a{fill-rule:evenodd;}techdegree
Jason Rich
Front End Web Development Techdegree Student 10,048 Points

Cameron,

Thank you for the prompt response. I see my error now. Your explanation made clear where my misstep was.

The <h3> element that I needed to style with the descendant selector #education h3 is a descendant of the <section> element, not the <h2> element, which is where I had the id="education". I've made the correction and now Developer Diane's Resume is formatting correctly.

And yes, I confused the backticks with commas.

Thanks again.