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

Michael Sims
Michael Sims
8,101 Points
Posted by Michael Sims
Michael Sims
8,101 Points

Selecting an anchor in the header

Hello there, quick question. I have a header I'm trying to build, that has an h1, a h2 and 3 navigation links. I'm trying to specifically take the text decoration off of the h1 and h2, but leave it on the navigation links. I tried selecting it using 

header a h1, h2 { text-decoration:none;}

but that didn't work for me.... I have the header section of the html and accompanying CSS (without the above statement). Thanks!

<header>
        <a href="index.html">
            <h1> Mike Sims </h1>
            <h2> Business Plan Writer </h2>
        </a>
        <nav>
            <ul>
                <li><a href="index.html">Portfolio</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>

        </nav>
    </header>

header {
  background-color: orange;}

header h1,
  h2{
  text-align: center;
  color: white;

  }

header ul {
  text-align: center;
}

header ul li {
  display: inline; 
  padding: 3%;

}

header ul li a{
  color: white;
  border: 1px;
  border-color: white:
}

2 Answers

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

You could try adding a new style rule that selects an anchor element, inside a list item, inside an unordered list inside a nag element and set those to have an underline text decoration, that way the CSS will know go leave those underlined in you links but keep them off the links in your header elements. :-)

Try it the the selectors you suggested for the header elements and it should work.

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

Glad you saw past my iPad typing mistakes lol

And that it worked :)