Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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.

sebbe12
sebbe12
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">
<head>
    <meta charset="UTF-8">
    <title>Links</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <ul class="link">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>

</body>
</html>

/* 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 { }.