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

How to change the color of 1 element only in the navigation header

Hello Treehouse community,

I hope you can help me to find the solution. I am trying to change the hover-over color of 1 element only in the navigation header, as a simple exercise.

I know how to change the color of any links in CSS using specific tags. For instance, this is something that I built from my very first HTML course. (the .tag class simply creates a grey background around the text)

<header>
 <h1 class="tag google" > This is a link to <a href="http://www.google.com" target="blank">Google.</a></h1>
      <h1 class="tag green" > This link is <a href="#" target="blank">Green.</a></h1>
      <h1 class="tag location">My home is Portland, Oregon.</h1>
</header>

In my CSS, the base color of every link and the hover-over effect is defined by:

a {
  text-decoration: none;
  color: #0499ff;
}

a:hover {
  color: #6633ff;
}

That being said, I can specifically control the link and hover-over colors for the classes "green" and "Google" with this CSS:

.green a {
  text-decoration: none;
  color: green;
}
.green a:hover {
  text-decoration: none;
  color: yellow;
}
.google a {
  text-decoration: none;
  color: pink;
}
.google a:hover {
  text-decoration: none;
  color: brown;
}

Now, the problem comes for the header navigation. The HTML for my header is the following:

<div class="main-nav">
        <ul class="nav">
          <li class="name">TEST</li>
          <li><a href="#">Home</a></li>
          <li><a href="new site.html">Second Site</a></li>
          <li class="photos"><a href="#">photos</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
    </div>

The CSS of the hover-over effect would be the following:

.nav a:hover {
  color: white;
}

I've assigned a tag to my photos link, which I want to make it orange when I hover-over. The CSS would be:

.photos a:hover {
  color: orange;
}

But it doesn't work. I also tried the following without getting any results. I am not sure what I should do!

.nav .photos a:hover {
  color: orange;
}

Thanks for your time!

Do yourself a favor and improve your semantics by utilizing the <header> element instead of the generic <div>.

Hello Mister Moody,

This was practically copied from a pre-made worksheet in the very first HTML introduction course. I am not yet familiar with the concept of <div> and hopefully will explore this further!

1 Answer

Jacob Jackson
seal-mask
.a{fill-rule:evenodd;}techdegree
Jacob Jackson
UX Design Techdegree Student 7,833 Points

Hey Alexander!

Without completely replicating your process (which I'm willing to do if this doesn't work), I noticed you forgot your "=" sign when assigning the class to your "photos" tag:

<li class "photos"><a href="#">photos</a></li>

should be

<li class="photos"><a href="#">photos</a></li>

Let me know if it works for you.

Good luck!

-Jake

Hello Jake,

Thanks for taking the time to answer!

I corrected the syntax error, used what's below and it worked!

}
.photos a:hover {
color: red;
}