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
Aya Yousef
9,658 Pointsselected nav link isn't working nav a.selected [HTML/CSS]
Selected class in <a> element isn't working with me although the hover is working just fine Here's my code:
main.CSS code strating from line 162
nav a.selected, nav a:hover{ color: red; }
index.HTML code starting from line 16 <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>
Here's a snapshot from my code https://w.trhou.se/rdqwyiv74i
2 Answers
Nick Ocampo
15,661 PointsYour code seems to be correct from what I see. Maybe there is another CSS rule that is overriding it. If you're using chrome, you can double-click (click with two fingers on the mac) on the link and select Inspect Element. On the right side you can see all the CSS that is being applied to the selected tag. Anything that is being overridden will show crossed out. Hope that helps.
Luis M Ballestas
2,314 PointsI forked your workspace and I could see that it's working just fine. Is there a way to mark questions as answered here?
Aya Yousef
9,658 PointsAya Yousef
9,658 PointsThank you Nick, the fault is that nav a:visited { color: #ccc; } was overriding it.. I switched the order between them and now it works just fine Here's the right order which worked with me:
nav a, nav a:visited { color: #ccc; }
nav a.selected, nav a:hover{ color: red; }