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 Make a Website Customizing Colors and Fonts Use Classes in CSS

nav a.selected glitch?

Is anyone else finding that the selected link does not change color as it should based on the code used in the video?

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

I even downloaded the project file and loaded the sample main.css file but it still does not work. Is it because of my browser (chrome on windows)?

Thank you for helping! I definitely should have been looking at the html too...

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> Nathaniel Sean Williams | Designer</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <header>
            <a href="index.html" id="logo">
             <h1>Nathaniel Sean Williams</h1>
             <h2>Designer</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>
        <div id="wrapper">
            <section>
                <ul>
                    <li>
                        <a href="img/numbers-01.jpg">
                        <img src="img/numbers-01.jpg" alt="">
                        <p> People.</p>
                        </a>
                    </li>
                    <li>
                        <a href="img/numbers-02.jpg">
                        <img src="img/numbers-02.jpg" alt="">
                        <p> Travel.</p>
                        </a>
                    </li>
                    <li>
                        <a href="img/numbers-06.jpg">
                        <img src="img/numbers-06.jpg" alt="">
                        <p> Nature.</p>
                        </a>
                    </li>
                    <li>
                        <a href="img/numbers-09.jpg">
                        <img src="img/numbers-09.jpg" alt="">
                        <p> Night.</p>
                        </a>
                    </li>
                    <li>
                        <a href="img/numbers-12.jpg">
                        <img src="img/numbers-12.jpg" alt="">
                        <p> Lightbox.</p>
                        </a>
                    </li>
                </ul>
            </section>
        </div>
            <footer>
                <a href="http://twitter.com/NateWilliamssss"><img src="img/twitter-wrap.png" alt="Twitter logo"></a>
                <a href="facebook.html"><img src="img/facebook-wrap.png" alt="Facebook logo"></a>
                <p>&copy; 2014 Nathaniel Williams.</p>
            </footer>

       </body>
</html>```

post your html between these your html :)

2 Answers

Hi Nathaniel,

You're missing the "selected" class from your html.

<li><a href="index.html" class="selected">Portfolio</a></li>

For each of your pages you need the "selected" class to be with the link for that page.

That was it! Thank you so much for helping me out.

This sort of issues don't come from the browser or the operating sistem. Could you paste the html also? Maybe the selected class is set on the li element not the anchor.