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
Amanda Shore
998 Pointsnav a.selected is not working. Can someone take a look at my code and see what I'm doing wrong?
The nav a:hover function is working fine, but the selected doesn't do anything. I'm not sure why!
My code in html is
<li><a href="index.html" class="selected">Portfolio</a></li>
My code in CSS is
nav a.selected, nav a:hover { color: #32673f; }
3 Answers
Damien Watson
27,419 PointsHi Amanda, the 'selected' class and the 'hover' have the same colour, so you wouldn't see a 'hover' state for the selected.
If you were to do the below, you will see the 'selected' item change background-color.
nav a.selected:hover { background-color:#F00; }
Amanda Shore
998 PointsBizarrely, when I try changing it to "nav a:selected, nav a: hover" the hover function stops working too! The video shows nav a.selected, so I was following that.
Damien Watson
27,419 PointsAndrew isn't correct in his comment. You are targeting the class, which requires '.selected'. Just follow this with ':hover'.
micram1001
33,833 PointsThe html code from the example in the video:
<li><a href = "index.html" class = "selected">Portfolio</a></li>
CSS code (anchor selected refers to a class and hover is a Pseudo-class.?)
nav a.selected, nav a:hover {
color: #32673f;
}