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 The Selectors Solution

2 Answers

Fredrik Rönnehag
Fredrik Rönnehag
2,342 Points

From what I can see you are creating a class named link but you haven't added the class to your <a> links. The hover works because its a:hover, so it will give the hover effect to all <a> tags.

Try adding the class to your <a> tags.

4,015 Points

So you mean hover gives to all links even if i specify i want only the links that got .link as a class. Because i choosed .link:hover it should only be for the links with class name link.

Thank you for your answer

Fredrik Rönnehag
Fredrik Rönnehag
2,342 Points

This CSS sets all anchor tags to the hover color orange.

a:hover {
color: orange;

This is a class named link, which sets hover to green and visited to red.

.link:hover {
color: green;
.link:visited {
color: red;

These are your links/anchor tags at line 19 in index.html. You need to add the class to the tags to overwrite the a:hover.

<li><a href="#">About</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Get in Touch</a></li>  

If you just want a specific style for the navbar links you could do a class named link and just add the anchor element to the class and then add it to the <ul>. Example:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <ul class="link">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>


/* CSS */

.link a{
    color: red;
.link a:hover {
    color: blue;

It's a little bit faster and less work than adding hover to .link:hover, since then you need to add the class to every element you want the hover effect to apply. Instead if you want the hover for all anchor tags inside a div or ul you can just add the class to that div or ul, and then in css you just add a .class a { }.