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

Posted by Felix Johansson
Felix Johansson
3,341 Points

Why won't my selected class work?

Hey do anyone know why my selected class wont work? (My hover does work)

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

nav a.selected, nav a:hover {
  color: #32673f;
}
Christian Andersson
Christian Andersson
8,712 Points

Could you please paste your entire HTML and CSS code?

Felix Johansson
Felix Johansson
3,341 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Felix Johansson Web Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
    <a href="index.html" id="logo">
      <h1>Felix Johansson</h1>
      <h2>Web Designer</h2>
    </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">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>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of gloes.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using Photoshop brushes.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com/felix.d.johansson"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2014 Felix Johansson.</p>
      </footer>
    </div>
  </body>
</html>

 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;
}
Ken Alger
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Edited for markdown.

Ken Alger
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Felix;

When I tried it on my system the "selected" element, in this case Portfolio as well as the hover feature appeared to work just fine. What are you hoping for it to do?

Ken

Felix Johansson
Felix Johansson
3,341 Points

Portfolio or index.html is supposed to be the color: #32673f; when it's selected.

Taylor Valley
Taylor Valley
1,998 Points

Having the same issue with the .selected class.

My code looks exactly the same as Felix's, and Nick's from the video.

It's not a browser issue since I've tested in Chrome, Safari, and Firefox.

.selected works for me all the time in Atom, so is this a Workspaces thing?

6 Answers

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Felix;

The nav seems to work fine on my end (FireFox 32.0.3). I checked it both on by local system with XAMPP and on [SassMeister.com](www.sassmeister.com) and am able to get the selected page (Portfolio or index.html) as well as the nav a:hover links to change to #32673f.

Ken

Felix Johansson
Felix Johansson
3,341 Points

Thanks I checked my site in Internet Explorer now and it worked fine might be a bug with my Google Chrome.

Nicholas Thorne
Nicholas Thorne
1,160 Points
Nicholas Thorne
Nicholas Thorne
1,160 Points

pretty sure this is a google chrome issue as I'm having exactly the same

Felix Johansson
Felix Johansson
3,341 Points
Felix Johansson
Felix Johansson
3,341 Points

.selected is a class

Nikola Petrusevski
PLUS
Nikola Petrusevski
Courses Plus Student 514 Points
Nikola Petrusevski
Nikola Petrusevski
Courses Plus Student 514 Points

Not sure if I should open a new question, but i have the same issue. The code is written as posted here, and the "selected" class is not working on any browser for me.

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

a.selected should be a:selected

CJ Williams
CJ Williams
34,372 Points
CJ Williams
CJ Williams
34,372 Points

Hey Felix,

With html5, you don't necessarily need to create a <ul> or <li>within the nav. The <nav> tag essentially works as a <ul>, and within the <nav> your links will be recognized as separate items. check out the code below: 

<nav>
  <a href="index.html" class="selected">Portfolio</a>
  <a href="about.html">About</a>
  <a href="contact.html">Contact</a>
</nav>

Now, your CSS should work just fine with this the way it is.