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

sebbe12
sebbe12
4,015 Points
Posted by sebbe12
sebbe12
4,015 Points

If i move something over the hover dosen't work why?

https://w.trhou.se/ke5hhq4tcc

https://gyazo.com/648ff0f6f0cc7a5d4bf46ce9cce1d5c7 This works https://gyazo.com/d1a7fe2e7bc91d83d0ea82db66603fbd This doesn't work

Why doesn't the second one work?

2 Answers

Fredrik Rönnehag
Fredrik Rönnehag
2,342 Points
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
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
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 { }.