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

Posted by Mateo Komljenovic
Mateo Komljenovic
3,771 Points

Problems with :hover, :visited on certain tasks.

When practicing this I have stumbled on a problem in Workspace. For example, task says:

/* Remove the text decoration from navigation links, and change their color when hovered */

First part works and it goes like: .navigation a { text-decoration: none; }

But when I get to the second part to change color when hovered I have tried standard type:

a:hover navigation { background-color: yellow; }

It actually didn't work for me and my workspace. After 100 tries I have tried with this:

.navigation a:hover { background-color: yellow; }

And this actually works. The same thing goes for next few tasks: /* Create visited and hover styles for all links inside 'main' */ .main-content a:visited { color: red; }

.main-content a:hover { background-color: blue; }

Is this just for me, or is there some kind of bug, and most important question: Is this a bad practice for later?

Mateo Komljenovic
Mateo Komljenovic
3,771 Points

Sheila Anguiano I see, I've made a really bad mistake here. Thank you so much!

1 Answer

Sheila Anguiano
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Sheila Anguiano
Full Stack JavaScript Techdegree Graduate 35,238 Points
Sheila Anguiano
.a{fill-rule:evenodd;}techdegree seal-36
Sheila Anguiano
Full Stack JavaScript Techdegree Graduate 35,238 Points

If you're actually writing your CSS rule like this:

a:hover navigation { background-color: yellow; }

This won't work, because that's not the correct order of the rule, what you're saying more or less with this rule is to change ALL the links to yellow when hovered....and that might not even work because you have the navigation word in there which is completely different to .navigation which is a class selector (or in other words, in references an element in your html file with the class navigation. That's why the following code works, as well as your other examples, because they follow the same patter of a specific element selector followed by the declaration

.navigation a:hover {
 background-color: yellow;
}