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

HTML How to Make a Website Customizing Colors and Fonts Use Classes in CSS

David Huebner
David Huebner
13,908 Points
Posted by David Huebner
David Huebner
13,908 Points

Selected Class is not applying to my site. The hover feature works but the currently selected page is not colored.

The selected class is not working in my code. The currently selected page should be the hexadecimal color we programmed (dark green) but it is not working correctly. It is however working for the nav hover.

Here is the html code I used: <li> <a href="index.html" class="selected">Portfolio</a></li>

Here is the CSS code I used: nav a.selected, nav a:hover { color: #32673f; }

Any suggestions as to why the selected class would not be working?

Thanks!

Jake Nisenboim
Jake Nisenboim
3,374 Points

The HTML did not show up ... You might need to add spacing -- I don't know why the < does not seem to work.

I assume you are working in workspaces? Have you tried closing it and opening it back up?

The CSS looks good to me.

6 Answers

Peter Gajos
Peter Gajos
1,041 Points
Peter Gajos
Peter Gajos
1,041 Points

I figured it out. This will fix your problem.

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

Sarah Jamieson
PLUS
Sarah Jamieson
Courses Plus Student 1,649 Points
Sarah Jamieson
Sarah Jamieson
Courses Plus Student 1,649 Points

I thought I was, but when I refreshed the preview page (even though it was a new page) it worked.

Joe White
Joe White
9,750 Points
Joe White
Joe White
9,750 Points

paste in your code

Brandon Schabell
Brandon Schabell
3,846 Points
Brandon Schabell
Brandon Schabell
3,846 Points

I am having this same issue. Here is my code:

main.css:

    a {
      text-decoration: none;
    }

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

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

    a {
      color: #6ab47b;
    }

    header {
      background: #6ab47b;
      border-color: #599a68;
    }

    h1, h2 {
      color: #fff;
    }

    nav {
      background: #599a68;
    }

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

    nav a.selected, nav a:hover {
      color: #32673f;
    }
caitlinbrothen
caitlinbrothen
1,237 Points
caitlinbrothen
caitlinbrothen
1,237 Points

I am also having this issue - has anyone found a solution?

Melissa Stark
Melissa Stark
3,955 Points
Melissa Stark
Melissa Stark
3,955 Points

I am having the same issue, I have refreshed, closed webpage and reopened and still not showing class selected color just hover. Has anyone found the solution?