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 trialFelix Johansson
3,341 PointsWhy 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;
}
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>© 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
Treehouse TeacherEdited for markdown.
Ken Alger
Treehouse TeacherFelix;
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
3,341 PointsPortfolio or index.html is supposed to be the color: #32673f; when it's selected.
Taylor Valley
1,998 PointsHaving 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
Treehouse TeacherFelix;
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
3,341 PointsThanks I checked my site in Internet Explorer now and it worked fine might be a bug with my Google Chrome.
Nicholas Thorne
1,160 Pointspretty sure this is a google chrome issue as I'm having exactly the same
Felix Johansson
3,341 Points.selected is a class
Nikola Petrusevski
Courses Plus Student 514 PointsNot 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
19,287 Pointsa.selected should be a:selected
CJ Williams
34,372 PointsHey 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.
Christian Andersson
8,712 PointsChristian Andersson
8,712 PointsCould you please paste your entire HTML and CSS code?