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

Posted by Alexander Mooney
Alexander Mooney
7,321 Points

Why doesn't nav a:hover, nav a.selected work here?

Here is my code:

<!DOCTYPE HTML>

<html>

    <head>
        <meta charset="utf-8">
        <title>Website Title</title>
        <link rel="stylesheet" href="css/normalize.css" type="text/css">
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic,800|Exo:500' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css" type="text.css">
    </head>

    <body>
        <header>
            <a href="index.html" id="logo">
                <h1>WEBSITE TITLE</h1>
                <h2>Website Subtitle</h1>
            </a>
            <nav>
                <ul>
                    <li><a href="index.html" class="selected">Home</a></li>
                    <li><a href="archives.html">Archives</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </header>
        <div id="wrapper">
            <section>
                <h3>Section Title</h3>
                <img src="img/snowywoods.jpg" alt="snowy woods">
                <p>Paragraphs removed for space conservation.</p>
            </section>
            <footer>
                <p>&copy 2015 Site Owner</p>
            </footer>
        </div>
    </body>

</html>

/*****************************************************************************************
*                                       GENERAL                                          *
*****************************************************************************************/

body {
    font-family; 'Open Sans', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}



/*****************************************************************************************
*                                       HEADING                                          *
*****************************************************************************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: left;
  margin: 0;
}

h1 {
  font-family: 'Exo', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}



/*****************************************************************************************
*                                       NAVIGATION                                       *
*****************************************************************************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}



/*****************************************************************************************
*                                       BODY                                             *
*****************************************************************************************/

h3 {
    margin: 0;
}



/*****************************************************************************************
*                                       FOOTER                                           *
*****************************************************************************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
}



/*****************************************************************************************
*                                       COLORS                                           *
*****************************************************************************************/


body {
    background-color: #fff;
    color: #999;
}

header {
    background: #aba;
    border-color: #afa;
}

nav {
    background: #afa;
}

h1, h2 {
    color: #fff;
}

a {
    color: #a5a;
}

nav a, nav a:visited {
    color: #fff;
}

nav a.selected, nav a:hover {
    color: #a5a:
}

footer {
    color: #ccc;
}

I've gone over the code countless times and still can't figure it out. My guess is that nav a, nav a:visited is displayed instead of nav a:hover, nav a.selected but I can't figure out why or how to change it.

2 Answers

David Edwards
David Edwards
8,002 Points

I think you have a colon at the end of your style rather than a semi colon and that's was causing you the pain. Try changing it to the following and give it another go.

nav a.selected, nav a:hover { color: #a5a; }

Alexander Mooney
Alexander Mooney
7,321 Points

Ahh I can't believe I didn't notice that. Thank you!

Zahscha Gonzalez
Zahscha Gonzalez
27,775 Points
Zahscha Gonzalez
Zahscha Gonzalez
27,775 Points

I ran your CSS through http://www.css-validator.org/ .

nav a.selected, nav a:hover{color:#a5a:} >>> should be nav a.selected, nav a:hover{color:#a5a;}

As I was looking at your HTML I noticed you have a closing </h1> paired with an open <h2>

Hope this helps