Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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 90,705 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 90,705 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 90,705 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 90,705 Points

Glad you saw past my iPad typing mistakes lol

And that it worked :)